CODEWITHSUNDEEP
angular
POV
POV

Reputation: 12005

How show/hide links in another component?

I have the following structure of main component app.component in Angular:

<div class="links">
    <div class="link_1"></div>
    <div class="link_2"></div>
</div>
<router-outlet></router-outlet>

So in <router-outlet></router-outlet> different components are substituted.

How to hide <div class="link_1"></div> if there is component inside <router-outlet></router-outlet>as instance EventComponent?

And how to show <div class="link_2"></div> if it is another component, no matter which. I am wondering how to show/hide menu elements above depend current component below.

I don't want to create variable in each component as public show = true;

Upvotes: 1

Views: 174

Answers (1)

derelict
derelict

Reputation: 2082

try including the router in your component with the router outlet and look for the path corresponding with the link selected, e.g.

constructor(private _router: Router ) {}

get currentUrl() { return this._router.url; }

then in your template

<div *ngIf="currentUrl !== 'someUrl'" class="link_1"></div>

Upvotes: 2

Related Questions