Styled component package for Angular


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for angular-styled-components in KB


An Angular module that provides styled components in Angular.


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

or with yarn: yarn add angular-styled-components


Import StyledComponentsModule

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

    imports: [
    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 backgroundColor="red" padding="2em" flexGrow="2">
        Right side

Style properties

Background properties

Property Css property Default Input type
background background none string
backgroundColor background-color initial string
backgroundSize background-size initial string

Border properties

Property Css property Default Input type
borderColor border-color initial string
borderTopColor border-top-color initial string
borderBottomColor border-bottom-color initial string
borderLeftColor border-left-color initial string
borderRightColor border-top-color initial string
borderWidth border-width initial string or integer
borderTopWidth border-top-width initial string or integer
borderBottomWidth border-bottom-width initial string or integer
borderLeftWidth border-left-width initial string or integer
borderRightWidth border-right-width initial string or integer
borderRadius border-radius initial string
borderTopLeftRadius border-top-left-radius initial string
borderTopRightRadius border-top-right-radius initial string
borderBottomLeftRadius border-bottom-left-radius initial string
borderBottomRightRadius border-bottom-right-radius initial string

Extra properties

Property Css property Default Input type
cursor cursor initial string
blur blur initial string
opacity opacity 1 string
box-shadow box-shadow initial string
transform transform none string

Flex properties

Property Css property Default Input type
fdr flex-direction row none
fdc flex-direction column none
fdrr flex-direction row-reverse none
fdcr flex-direction column-reverse none
fw flex-wrap wrap none
fnw flex-wrap nowrap none
fwr flex-wrap wrap-reverse none
fffd flex-flow flex-direction none
fffw flex-flow flex-wrap none
fb flex-basis auto integer
jcsa justify-content space-around none
jcsb justify-content space-between none
jcc justify-content center none
jcfe justify-content flex-end none
jcfs justify-content flex-start none
jcse justify-content space-evenly none
aib align-items baseline none
aic align-items center none
aife align-items flex-end none
aifs align-items flex-start none
ais align-items stretch none
acb align-content baseline none
acc align-content center none
acfe align-content flex-end none
acfs align-content flex-start none
asa align-self auto none
ass align-self stretch none
asc align-self center none
asfs align-self flex-start none
asfe align-self flex-end none
asb align-self baseline none
asi align-self initial none
flex flex 1 integer
flexGrow flex-grow 1 integer
flexShrink flex-shrink 1 integer
order order 1 integer

Font properties

Property Css property Default Input type
color color initial string
fontWeight font-weight normal string or integer
underline text-decoration underline none
italic font-style italic none
lineHeight line-height 1 string or integer
lineThrough text-decoration line-through none
whiteSpace white-space initial string
textOverflow text-overflow initial string

Height properties

Property Css property Default Input type
height height initial string or integer
maxHeight max-height initial string or integer
minHeight min-height initial string or integer

Margin properties

Property Css property Default Input type
margin margin 0 string or integer
marginLeft margin-left 0 string or integer
marginRight margin-right 0 string or integer
marginTop margin-top 0 string or integer
marginBottom margin-bottom 0 string or integer

Overflow properties

Property Css property Default Input type
overflow overflow none string
overflowX overflow-x none string
overflowY overflow-y none string

Padding properties

Property Css property Default Input type
padding padding 0 string or integer
paddingLeft padding-left 0 string or integer
paddingRight padding-right 0 string or integer
paddingTop padding-top 0 string or integer
paddingBottom padding-bottom 0 string or integer

Position properties

Property Css property Default Input type
position position initial string
display display block string
zIndex z-index 1 integer
left left 0 integer
right right 0 integer
top top 0 integer
bottom bottom 0 integer

TextAlign properties

Property Css property Default Input type
tac text-align center none
tar text-align right none
tal text-align left none

Width properties

Property Css property Default Input type
width width initial string or integer
maxWidth max-width initial string or integer
minWidth min-width initial string or integer

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from