How do I used *ngIf to toggle child components of components featured in more than one location?

Question

I have components that need to be flexible for other areas of my site and so far am thinking using

*ngIf

to toggle the necessary child component linking to the route would be the easiest way to go about achieving it.

To be more precise, I have two sections, one I call the "Rebranding" section and the other the "Brand a New Business" section. I have 1 point I want to make to them both in two different ways. Which I'm encompassing in a "Fresh Start" component.

A "fresh start" for someone who's been in Business for 6 years is different from a "fresh start" for someone who's starting a new Business, therefor there's different key points I want to touch on.

The reason I want to keep them housed in one component is because in the long run I can see it being easier to manage each "point" I want to make for each crowd I want to communicate it to. I figured that would be cleaner and easier than having that many components all scattered around and wired into the routing.

So far this is what I've been able to muster up for the area of my site I'm on now.

import { Component }                from '@angular/core';
import { Router }                   from '@angular/router';



@Component({
    selector: 'asset-packs',
    template: `<h1>Asset Packs</h1>
               <asset-expand *ngIf="router.urlTree.contains(router.createUrlTree(['/expand']))"></asset-expand>
              `,
    directives:[
        Router
    ]
})

export class PointAssetsComponent {

    constructor(private router: Router){};
}

I have it all routed up in the module and didn't get any errors prior to trying this method. I came across it on another answer on here that really didn't give much clarity in terms of what components I needed to import. With that being said I already know this is incomplete, wasn't sure of where to add the constructor, I tried it both on top and bottom, not sure if I'm even using the router correctly. without the *ngIf everything shows up perfectly fine. I figured I'd start out with one nested component to make sure it shows up where I want it to and stays off on the other pages that use this component. This in particular is for the "assets" component, which will be featured in 3 sections, but 2 of them will be the same, which means I'm also going to need to use an "or" statement or throw a "!" in there.

score 2 · Answer 1 · answered Jan 03 '17 at 07:19

I'd use the "ActivatedRoute" for toggling components depending on route.

import { ActivatedRoute } from "@angular/router";
//   
constructor(
    public activatedRoute: ActivatedRoute
)
{
    this.activatedRoute.url.subscribe(
                (data: any) => {
                    this.mycurrentUrl = "";
                    for (let i of data) {
                        this.mycurrentUrl = i.path;
                    }
                },
                error => console.debug("URL ERROR", error),
                () => console.log('Current URL:' + this.mycurrentUrl));
}
// Check current route
isExpandRoute() {
    if (this.mycurrentUrl == 'expand' )
        return true;
    } else {
        return false;
    }
}

is there a way I just collect the current route in a variable and use the *ngIf to check against it? — Optiq, Jan 03 '17 at 07:38
Haven't used it this way, but should also work. But method allows more flexibility, because in real word application there are some more checks necessary for doing the toggling. — Karl, Jan 03 '17 at 07:41

score 1 · Answer 2 · edited May 23 '17 at 12:09

1

Binding to the router this ways seems quite inefficient. Angular change detection will cause contains(...) to be called on every change detection turn.

I'd suggest using

@Component({
    selector: 'asset-packs',
    template: `<h1>Asset Packs</h1>
               <asset-expand *ngIf="isExpandRoute"></asset-expand>
              `,
    directives:[
        Router
    ]
})
export class PointAssetsComponent {

    constructor(private router: Router){
      router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe((event:Event) => {
        this.isExpandRoute = router.urlTree.contains(router.createUrlTree(['/expand']));
      });
    }
}

I don't know if this fixes your actual problem though.

See also How to detect a route change in Angular 2?

edited May 23 '17 at 12:09

Community

1
1

answered Jan 03 '17 at 07:02

Günter Zöchbauer

623,577
216
2,003
1,567

ok I think this might be on the right path. Only thing was I plan to add a couple more components to this component that I want to toggle depending on what section this component is called in. Since I posted this I've been trying to figure out how to check the route and maybe store it in a variable and have the *ngIf commands on each component check to see if it matches the variable. if that makes sense – Optiq Jan 03 '17 at 07:32
1

Sure, makes sense. Using `ActivatedRoute` as mentioned by Karl might be a better idea though. – Günter Zöchbauer Jan 03 '17 at 07:34

How do I used *ngIf to toggle child components of components featured in more than one location?

2 Answers2