AngularNYC | AngularNYC - Structural Directives - Kirill Cherkashin - 06/29/2017 @Angularnyc | Uploaded July 2017 | Updated October 2024, 1 hour ago.
In this semi-live-coding-session, Kirill will show us how to prevent Angular from instantiating components which are in the template, but have not been displayed yet.

LEVEL - ADVANCED

CONTENTS

INTRO
0:05 - Introduction
1:11 - Slides

CREATING NEW COMPONENT
1:25 - Example application
3:39 - Dive into material tab component source code
5:07 - Content Projection
6:29 - Ways to init component
6:38 - Init via template
7:24 - Init with *ngIf
8:19 - Tab position and animation explained
9:02 - Using template reference variable
9:26 - Angular 2 change detection explained
12:09 - Find the code fragment where position is updated
12:33 - Enabling Production mode
13:34 - Creating structural directive to show/hide tab
14:14 - Directives logic explained

HOW *NGIF WORKS
15:02 - Dive into *ngIf source code
17:13 - Try the *ngIf code in action
17:35 - ngTemplate logic explained
18:30 - templateRef
19:31 - viewContainer

HOW NGFOR WORKS
20:23 - ngFor logic explained
21:13 - MicroSyntax

21:50 - Creating another app component
22:20 - Async pipe
23:30 - ngIf curly braces error
25:17 - ngIfThen logic explained
27:24 - NgTemplateOutlet as better alternative
29:10 - Rewrite structure using ngTemplate

BONUS
30:23 - Reinventing *ngIf
31:50 - ngIfContext
32:29 - Reinventing mdTabGroup component
37:21 - Value and events problem
40:43 - The proper solution via mgTabNavBar

RESOURCES

github.com/angular/material2