# angular-style-custom-properties

> allow to generate inline style and apply even css custom properties

Latest version **1.0.0** (published 2016-11-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install angular-style-custom-properties
pnpm add angular-style-custom-properties
yarn add angular-style-custom-properties
bun add angular-style-custom-properties
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-11-20 |
| First published | 2016-11-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | matteowebdesigner |
| Maintainers | matteowebdesigner |

## Links

- npm: https://www.npmjs.com/package/angular-style-custom-properties
- Repository: https://github.com/MatteoWebDesigner/angular-style-custom-properties
- Homepage: https://github.com/MatteoWebDesigner/angular-style-custom-properties#readme
- Issues: https://github.com/MatteoWebDesigner/angular-style-custom-properties/issues
- npm.io page: https://npm.io/package/angular-style-custom-properties

## Recent versions

- 1.0.0 (latest) — 2016-11-20

## README

# angular-style-custom-properties

# demo 

plunker: https://plnkr.co/edit/QHCR92capTrJYJmdjLwU?p=preview


# use

properties you can use:
- app-style
- angular-style-custom-properties
- angular-style-custom-properties-fallback

the most efficient way to use this directive is to use just one property:

```
<div 
    teo-style="{
        "--size": '50%',
        "color": "tomato"
    }"
>component</div>

```

or combined with the fallback

```
<div 
    teo-style="{
        "--size": '50%',
        "color": "tomato"
    }"
    teo-style-custom-properties-fallback="{
        "width": '50%',
        "color": "tomato"
    }"
>component</div>
```

try to avoid complex scenario where you use all of them

# tested
- Chrome 54
- Safari 10
- Firefox 50
- IE 11 on Win7
- Edge 14 on Win10

# improvements 

Every properties is watched, if multiple properties are changing this cause to run init() more than once and run the whole style calculation.

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