angular-styled-components v0.0.21

An Angular module that provides styled components in Angular.

Installation

With npm: npm install angular-styled-components --save

or with yarn: yarn add angular-styled-components

Usage

Import StyledComponentsModule

import { NgModule } from '@angular/core';
import { StyledComponentsModule } from 'angular-styled-components';
import { HomeComponent } from '@app/modules/home/home.component';

@NgModule({
    imports: [
        StyledComponentsModule,
    ],
    exports: [],
    declarations: [HomeComponent],
    providers: []
})
export class HomeModule {}

Use in HTML tag

<div fdr jcc aic>
    <div color="grey" margin="32" flex="1">
        Left side
    </div>
    <div backgroundColor="red" padding="2em" flexGrow="2">
        Right side
    </div>
</div>

Style properties

Background properties

Border properties

Extra properties

Flex properties

Font properties

Height properties

Margin properties

Overflow properties

Padding properties

Position properties

TextAlign properties

Width properties

Override style properties

Inline style properties can be extended or overriden using class name. In order to override a style already defined in an inline style property, the css tag !important has to be used.