@whjvenyl/angular-xxl

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

The following decorators are available

• @RouteData / @RouteParams / @RouteQueryParams - Easy route access
• @HostElement - Monitor element dimensions
• @Tunnel - 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

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

Read more

DEMO

@RouteData / @RouteParams / @RouteQueryParams

These decorators let you access the router's data, params and queryParams easily with just one line of code.

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

Read more

Demo

Tunnel

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

Read more

DEMO

TODO

• Write polyfill for size-change detection using this

Contributors

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