Activated Route

The directive is provides access to ActivatedRoute. The directive allows you to not use async pipe and removes boilerplate code from the component.

Getting ActivatedRoute

An example to get ActivatedRoute in COMPONENT.template.html.

<ng-container *route="let route">
    {{ route }} // is ActivatedRoute instance
</ng-container>

Getting field value of ActivatedRoute

All fields with observables will return the current value and will receive new values automatically.

An example to get field value of ActivatedRoute in COMPONENT.template.html.

<ng-container *route="let value = FIELD">
    {{ value }} // is ActivatedRoute[FIELD]
</ng-container>

<ng-container *route="let params = paramMap">
    {{ params.get('id') }}
</ng-container>

<ng-container *route="let params = params">
    {{ params.id }}
</ng-container>