TypeScript icon, indicating that this package has built-in type declarations

    0.0.21 • Public • Published

    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.


    npm i angular-styled-components

    DownloadsWeekly Downloads






    Unpacked Size

    620 kB

    Total Files


    Last publish


    • avatar