# angular-xxl

> This library contains a couple of decorators which provide functionality useful for angular components.

Latest version **4.0.0** (published 2020-12-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-xxl
pnpm add angular-xxl
yarn add angular-xxl
bun add angular-xxl
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2020-12-31 |
| First published | 2018-02-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 168.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | lucascalje |
| Maintainers | jeanluca |
| Keywords | angular, router, resolve, parameter, data, decorator |

## Links

- npm: https://www.npmjs.com/package/angular-xxl
- Repository: https://github.com/scaljeri/angular-xxl
- Homepage: https://github.com/scaljeri/angular-xxl#readme
- Issues: https://github.com/scaljeri/angular-xxl/issues
- npm.io page: https://npm.io/package/angular-xxl

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 4.0.0 (latest) — 2020-12-31
- 3.0.2 — 2020-06-12
- 3.0.1 — 2020-05-17
- 3.0.0 — 2020-05-17
- 2.0.0 — 2019-10-01
- 1.0.8 — 2019-07-08
- 1.0.7 — 2018-12-18
- 1.0.5 — 2018-12-18
- 1.0.4 — 2018-12-18
- 1.0.3 — 2018-12-18
- 1.0.2 — 2018-12-08
- 1.0.1 — 2018-02-03
- 1.0.0 — 2018-02-03

## README

This library contains a couple of decorators which provide functionality useful for angular components. 

[![CircleCI](https://circleci.com/gh/scaljeri/angular-xxl.svg?style=svg)](https://circleci.com/gh/scaljeri/angular-xxl)
[![Coverage Status](https://coveralls.io/repos/github/scaljeri/angular-xxl/badge.svg?branch=master)](https://coveralls.io/github/scaljeri/angular-xxl?branch=master)

[![GitHub issues](https://img.shields.io/github/issues/scaljeri/angular-xxl.svg?style=plastic)](https://github.com/scaljeri/angular-xxl/issues)

The following decorators are available

  *  [@RouteData / @RouteParams / @RouteQueryParams](docs/ROUTE.md) - Easy route access 
  *  [@HostElement](docs/HOST_ELEMENT.md) - Monitor element dimensions
  *  [@Tunnel](docs/TUNNEL.md) - Communication between components
  
This library can be installed using `yarn`

    $> yarn add angular-xxl
    
Below is a short description of each `@decorator`

### @HostElement
This decorator monitors dimensions (width/height) of elements; The root element of the component and/or any of its children

```typescript
    @HostElement('width') width$: Observable<number>;
    @HostElement('width', {observable: false}) width: number;
    @HostElement('height', 'width'}) size$: Observable<{height: number, width: number};
```

[Read more](docs/HOST_ELEMENT.md)

[DEMO](https://stackblitz.com/edit/host-element?file=app%2Fnormal%2Fnormal.component.ts)

### @RouteData / @RouteParams / @RouteQueryParams
These decorators let you access the router's data, params and queryParams easily with just one line of code. 
 
```typescript
@Component({
    selector: 'app-contacts',
    templateUrl: './contacts.component.html',
    styleUrls: ['./contacts.component.scss']
})
export class ContactsComponent implements OnInit {
    @RouteData() contacts$: Observable<Contact[]>;
    @RouteParams('contactId', { observable: false}) contactId: string;
    @RouteQueryParams('search', { pipe: [map( x => x * 10)]}) search$: Observable<string>;
    
    constructor(private route: ActivatedRoute) {} // The `route` is required!
    
    ngOnInit(): void {} // This is required too
}
```

There is some flexibility in how the data is received in the component which is all described in more detail [here](docs/ROUTE.md).

[Read more](docs/ROUTE.md)

[Demo](https://stackblitz.com/edit/angular-route-xxl-g64g5p?file=app%2Futils%2Froute-decorator.ts)


### Tunnel
This decorator allows you to setup communication between instances of the same components/class.

[Read more](docs/TUNNEL.md)

[DEMO](https://stackblitz.com/edit/angular-tunnel?file=app%2Fblock%2Fblock.component.ts)

### TODO
  * Write polyfill for size-change detection using [this](https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed)

### Contributors
   + @dirkluijk - Suggested to solve the issue using decorators
   + @superMDguy - Added `@RouteQueryParams()` and an option to return actual values instead of Observables

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