Angular ngIf: Complete Guide - https://blog.angular-university.io/angular-ngif

01.html

<div class="container" *ngIf="userLoggedIn">
  
      .... visible only to authenticated users 
  
    <button *ngIf="user.admin">Delete User</button>
  
</div>

02.html

<ng-container *ngIf="userLoggedIn">
  
      .... visible only to authenticated users 
  
</ng-container>

03.html

<div class="container" *ngIf="10">
   
   .... this content will be visible because 10 is truthy ...
  
</div>

<div class="container" *ngIf="0">
   
   .... this content will be hidden because 0 is falsy ...
  
</div>

<div class="container" *ngIf="'hello world'">
   
   .... this content will be visible because the string 'hello world' is truthy ...
  
</div>

<div class="container" *ngIf="''">
   
   .... this content will be hidden because the empty string '' is falsy ...
  
</div>

04.html

<div class="container" *ngIf="{hello: 'world'}">
   
   .... this content will be visible because the expression is truthy ...
  
</div>

<div class="container" *ngIf="{}">
   
   .... this content will also be visible because the empty object is also truthy ...
  
</div>

<div class="container" *ngIf="[1, 2 ,3]">
   
   .... this content will be visible because the expression is truthy ...
  
</div>

<div class="container" *ngIf="[]">
   
   .... this content will be visible because the empty array is also truthy ...
  
</div>

05.html

<div class="container" *ngIf="courses.length; else noCourses">
  <h1>All Courses</h1>
  ....
</div>  

<ng-template #noCourses>
  <h1>No courses available.</h1>
</ng-template>

06.html

<ng-container *ngIf="courses.length; then coursesList; else noCourses">
 </ng-container>

<ng-template #coursesList>
  <h1>All courses available</h1>
  ....
</ng-template>

<ng-template #noCourses>
  <h1>No courses available.</h1>
</ng-template>

07.html

<ng-container *ngIf="(courses$ | async) as courses">
    <div class="courses">
        {{courses.length}}
    </div> 
</ng-container>

08.html

<div class="header" *ngIf="(user$ | async) as user">

     ... this section of the page only needs the user ...
     
    <button *ngIf="!user">Login</button>
     
    <button *ngIf="user.loggedIn">Logout</button>    
     
</div>

<div class="body" *ngIf="(courses$ | async) as courses">

     <ng-container *ngIf="(lessons$ | async) as lessons"> 
     
         ... we also need the user here again ...
     
         <ng-container *ngIf="(user$ | async) as user">
         
             ... this section of the page needs courses, lessons, and the user ....
         
         </ng-container>
     
     </ng-container>

</div>

<div class="footer" *ngIf="(courses$ | async) as courses"> 

    <ng-container *ngIf="(lessons$ | async) as lessons">
         
        ... this section of the page only needs the courses and the lessons ...     
         
     </ng-container>

</div>

09.html

<ng-container *ngIf="(user$ | async) as user">

    <ng-container *ngIf="(courses$ | async) as courses">

        <ng-container *ngIf="(lessons$ | async) as lessons">

            <div class="header">
                ...
            </div>

            <div class="body">
                ...
            </div>
          
            <div class="footer">
                ...
            </div>

        </ng-container>
      
    </ng-container>
  
</ng-container>

10.html

<ng-container *ngIf="(data$ | async) as data">
    <div class="header">
        ... access the user via data.user ...
    </div>
    <div class="body">
        ... access the data via data.user, data.courses, data.lessons ...
    </div>
    <div class="footer">
        ... access the data via data.courses and data.lessons ...
    </div>
</ng-container>

11.ts

{
    user: {
        admin:true,
        name: ...,
        email: ...
    },
    courses: [],
    lessons: []
}

12.ts

{
    user: {
        admin:true,
        name: ...,
        email: ...
    },
    courses: [
        ... 
    ],
    lessons: []
}

14.ts

{
    user: {
        admin:true,
        name: ...,
        email: ...
    },
    courses: [
        ... 
    ],
    lessons: [
       ....
    ]
}

15.ts

import {combineLatest} from "rxjs";

interface ExampleData {
    user:User;
    courses: Course[];
    lessons: Lesson[];
}

@Component({
    selector: "single-data-observable-example",
    templateUrl: "single-data-observable-example.component.html"
})
export class SingleDataObservableExample implements OnInit {

    data$: Observable<ExampleData>;
      
    constructor(private store:Store, coursesService: CoursesService) {}  
      
    ngOnInit() {
      
        const user$ = this.store.pipe(select(selectUser));
      
        const courses$ = this.coursesService.loadCourses(...)
                          .pipe(
                             startWith([])
                          );
      
        const lessons$ = this.coursesService.loadLessons(...)
                          .pipe(
                             startWith([])
                          );
                                                               
        this.data$ = combineLatest([user$, courses$, lessons$])
                      .pipe(
                          map(([user, courses, lessons]) => {
                              return {
                                  user,
                                  courses,
                                  lessons
                              };
                          }) 
                      );
      
    }  
}

16.html

<div class="container" *ngIf="courses.length; else noCourses">

       ... Angular will de-sugar this form of ngIf using the * syntax ...
  
</div>

<ng-template #noCourses>

  <h1>No courses available.</h1>
  
</ng-template>

17.html

<ng-template [ngIf]="courses.length" [ngIfElse]="noCourses">
  
    <div class="container">

       ... Here is what the template looks after de-sugaring the *ngIf syntax ...
  
    </div>
  
</ng-template>

<ng-template #noCourses>

  <h1>No courses available.</h1>
  
</ng-template>