@whjvenyl/angular-xxl
v1.0.7
Published
This library contains a couple of decorators which provide functionality useful for angular components.
Downloads
3
Maintainers
Readme
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};
@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.
Tunnel
This decorator allows you to setup communication between instances of the same components/class.
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