Using *ngIf with routerlink

Question

How would I implement "ngif" to a routerlink instead of creating a button?

example: *ngIf="auth.isAuthenticated()" (click)="auth.logout()"

To: <a [routerLink]="['/']">Logout

What's the purpose of combining `*ngIf` with `routerLink`. Sounds weird to me. How is the button related? — Günter Zöchbauer, Feb 16 '18 at 07:08
I'm using Auth0 for authentications and I'm using a template that already has a routerlink logout link. Instead of creating an actually button, I want to implement into the routerlink. Example of login button that came from Auth0's guide ' — Mystikal79, Feb 16 '18 at 15:26
Ouch, I mixed up `routerLink` with `router-outlet`. So what is actually the problem with `routerLink` and `*ngIf`? Btw. calling a function in view bindings like `*ngIf="auth.isAuthenticated()"` is prone to cause serious performance issues if `auth.isAuthenticated()` is doing some actual work (instead of perhaps just returning a value from a field). `auth.isAuthenticated` will be called very frequently (every time Angular runs change detection). It would be better to use an `Observable` that emits the new value when the value changed. — Günter Zöchbauer, Feb 16 '18 at 15:32
event bindings like `(click)="auth.logout()"` are perfectly fine of course — Günter Zöchbauer, Feb 16 '18 at 15:34

jaibatrik · Answer 1 · 2018-02-16T16:41:34.767

0

You can put ngIf on any element. In your case <a *ngIf="auth.isAuthenticated()" [routerLink]="['/']">Logout</a> should work fine.

edited Feb 16 '18 at 16:41

answered Feb 16 '18 at 07:08

jaibatrik

I try that and it just loops and keeps reloading the page. Error: "Cannot read property 'isAuthenticated' of undefined". – Mystikal79 Feb 16 '18 at 16:17
That means auth is not initialized in your component. – jaibatrik Feb 16 '18 at 16:42
In this case `auth?.isAuthenticated()` would help to get rid of the error – Günter Zöchbauer Feb 16 '18 at 16:47

Ramesh Rajendran · Accepted Answer · 2018-02-16T19:12:06.967

0

Try this

<span  *ngIf="auth.isAuthenticated()"><a [routerLink]="['/']">Logout</a></span>

edited Feb 16 '18 at 19:12

answered Feb 16 '18 at 07:10

Ramesh Rajendran

Get an error "already closed by another tag" and just loops the page. I'm using an Angular admin template and here is an example: – Mystikal79 Feb 16 '18 at 16:19
Logout – Mystikal79 Feb 16 '18 at 16:21
`routerLink="/"` is the same as `[routerLink]="['/']"` – Günter Zöchbauer Feb 16 '18 at 16:46
1

@GünterZöchbauer Thanks explain about how it can cause performance issues. I agree since I now see that sometime the page loads certain functions randomly. I just keep it simple and link it back to the authentication 's page as it replace "login" with "logout". '' '' – Mystikal79 Feb 16 '18 at 18:44

2 Answers2