Angular 11 Ternary expression *ngIF

Question

I am stuck a bit. I am trying to write *ngIf else statement using ternary expression The goal is to write *ngIf if a user is loggedin the logo a href leads to one Url if not logged in href leads to another URL.

https://stackblitz.com/edit/angular-ivy-oyyuxu?file=src%2Fapp%2Fapp.component.html

Thanks

score 1 · Answer 1 · answered May 10 '21 at 21:55

1

You can use ternary expressions in template like this:

<a [href]="auth.loggedInUser ? 'http://userLogged' : 'http://userNotLogged'">

answered May 10 '21 at 21:55

HugoL

9
1

Thank you! it worked! I forgot the synthax for ternary :) – Rollerball May 13 '21 at 00:55
Thank you all! you guys are amazing! – Rollerball May 18 '21 at 20:55

score 0 · Accepted Answer · answered May 10 '21 at 22:27

Without being sure how to implement your login, I changed your code to work:

// app.component.ts 
export class AppComponent {
    name = 'Angular ' + VERSION.major;
    public auth: any = { loggedInUser: false };
}

// app.component.html
<a *ngIf="!auth.loggedInUser">
  <img id="nav-logo"
                src="https://icm.aexp-static.com/shopamex/img/global-images/Parks_3.jpg"/>
</a>

However, a simple login would look more like this:

import { Component } from '@angular/core';
import { Observable, Subscription } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public auth: { loggedInUser: boolean };

  public constructor(protected authService: AuthService) {
    let login$: Observable<boolean> = this.authService.Login();
    let sub: Subscription = login$.subscribe((success:boolean) => {
       this.auth.loggedInUser = success;
    });
  }
}

Angular 11 Ternary expression *ngIF

2 Answers2