Skip to content

Instantly share code, notes, and snippets.

@jhades

jhades/01.html

Last active June 10, 2024 17:50
Show Gist options
  • Save jhades/712379a271bd9694a1500bedfbdc41c4 to your computer and use it in GitHub Desktop.
Save jhades/712379a271bd9694a1500bedfbdc41c4 to your computer and use it in GitHub Desktop.
Download ZIP
Angular ngIf: Complete Guide - https://blog.angular-university.io/angular-ngif
Raw
01.html
<div class="container" *ngIf="userLoggedIn">
.... visible only to authenticated users
<button *ngIf="user.admin">Delete User</button>
</div>
Raw
02.html
<ng-container *ngIf="userLoggedIn">
.... visible only to authenticated users
</ng-container>
Raw
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>
Raw
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>
Raw
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>
Raw
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>
Raw
07.html
<ng-container *ngIf="(courses$ | async) as courses">
<div class="courses">
{{courses.length}}
</div>
</ng-container>
Raw
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>
Raw
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>
Raw
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>
Raw
11.ts
{
user: {
admin:true,
name: ...,
email: ...
},
courses: [],
lessons: []
}
Raw
12.ts
{
user: {
admin:true,
name: ...,
email: ...
},
courses: [
...
],
lessons: []
}
Raw
14.ts
{
user: {
admin:true,
name: ...,
email: ...
},
courses: [
...
],
lessons: [
....
]
}
Raw
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
};
})
);
}
}
Raw
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>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment