AngularJS 2: new router and templateProvider practice from Angular 1

Question

I'm new to angular 2. In angular 1 i used ui-router and templateProvider to use different templates in one controller, for example:

     templateProvider: function ($localStorage) {
      if($localStorage.isAdmin) { //just an example, here could be any condition, like url has some params
        return '<admin></admin>';
      } else if($localStorage.isManager) {
        return '<manager></manager>';
      }
    },

how can i achieve something similar in angular 2?

for example i have such routes:

{ path: 'customers/:id', component: CustomerDetailsComponent },
{ path: 'customers/:id/edit', component: CustomerDetailsComponent }

how can i in CustomerDetailsComponent check it?

like:

  ngOnInit(): void {
    this.activatedRoute.params.subscribe(params => {
      if (params['edit']) { //how to add a condition? to split edit from show view
        /*someTemplateLogic*/
      }
    });
  }

is it possible to do?

so: two different templates for routes:

{ path: 'customers/:id', component: CustomerDetailsComponent },
{ path: 'customers/:id/edit', component: CustomerDetailsComponent }

with edit and without - how to check which route i have, and set such template in one component

Günter Zöchbauer · Answer 1 · 2016-12-27T13:32:00.820

1

<admin *ngIf="isAdmin"></admin
<manager *ngIf="!isAdmin"></manager>

  ngOnInit(): void {
    this.router.events
    .filter(f => f instanceof NavigationEnd)
    .forEach(e => this.isAdmin = e.url.endsWith('/edit'));
  }

edited Dec 27 '16 at 13:32

answered Dec 27 '16 at 13:21

Günter Zöchbauer

623,577
216
2,003
1,567

`if (params['edit']) { //how to add a condition? to split edit from show view this.isAdmin = true; }` - this wouldn't work – brabertaser19 Dec 27 '16 at 13:23
You could try to make your question more clear. `if (params['edit'])` is already a condition. Why do you think "this wouldn't work"? – Günter Zöchbauer Dec 27 '16 at 13:24
check upd in question – brabertaser19 Dec 27 '16 at 13:27
by the way, should i add `ngOnDestroy` for `this.activatedRoute.params.subscribe(params => {` ? – brabertaser19 Dec 27 '16 at 13:37
No, it's not necessary. – Günter Zöchbauer Dec 27 '16 at 13:39
maybe there are another ways of `e.url.endsWith('/edit')`, i mean maybe there is a possibility to name each route, and ckeck route name\ – brabertaser19 Dec 27 '16 at 13:52
There is no route name but you can use `data`. See http://stackoverflow.com/questions/38644314/changing-the-page-title-using-the-angular-2-new-router/38652281#38652281 for an example. – Günter Zöchbauer Dec 27 '16 at 13:55

AngularJS 2: new router and templateProvider practice from Angular 1

1 Answers1