# angular-styled-components

> Styled component package for Angular

Latest version **0.0.21** (published 2019-03-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install angular-styled-components
pnpm add angular-styled-components
yarn add angular-styled-components
bun add angular-styled-components
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.21 |
| Published | 2019-03-20 |
| First published | 2018-05-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 605.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Donovan De Smedt |
| Maintainers | donovands |
| Keywords | angular, styled-components, css, css-in-js |

## Links

- npm: https://www.npmjs.com/package/angular-styled-components
- npm.io page: https://npm.io/package/angular-styled-components

## Dependencies (1)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.2

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.21 (latest) — 2019-03-20
- 0.0.20 — 2019-03-20
- 0.0.19 — 2019-01-21
- 0.0.18 — 2019-01-21
- 0.0.17 — 2018-11-14
- 0.0.16 — 2018-11-13
- 0.0.15 — 2018-11-12
- 0.0.14 — 2018-11-07
- 0.0.13 — 2018-11-05
- 0.0.12 — 2018-09-21
- 0.0.11 — 2018-09-19
- 0.0.10 — 2018-09-17
- 0.0.9 — 2018-08-08
- 0.0.8 — 2018-07-25
- 0.0.7 — 2018-07-25
- … 6 more at https://npm.io/package/angular-styled-components/versions

## README

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

---

| 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.

---
_Source: https://npm.io/package/angular-styled-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._