What's Angular View? - Speaker Deck

Slide 1

Slide 1 text

What's Angular View? Siwat Kaolueng https://perjerz.netlify.com

Slide 2

Slide 2 text

Siwat Kaolueng (Jame) Independent Web & Angular Consultant - Organize Angular Thailand

Slide 3

Slide 3 text

What you will learn - Use-case - View, ViewContainerRef

Slide 4

Slide 4 text

Use-case

Slide 5

Slide 5 text

Structural Directive (*ngIf, *ngFor) https://angular.io/guide/structural-directives#structural-directive-shorthand

Slide 6

Slide 6 text

Custom Structural Directive https://stackblitz.com/github/zetsnotdead/ng-carousel

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Dynamic Component https://stackblitz.com/angular/xejegxgbjmy

Slide 9

Slide 9 text

Manual Change Detection https://stackblitz.com/edit/change-detection-visualization-bv6f2l

Slide 10

Slide 10 text

The Last Guide For Angular Change Detection You'll Ever Need - Mokkapps (Michael Hoffmann) - Senior Freelance Fullstack Developer

Slide 11

Slide 11 text

View The smallest grouping of display elements that can be created and destroyed together - Angular Document Angular data structure holding DOM elements - Me

Slide 12

Slide 12 text

Every component has a component view associated with it

Slide 13

Slide 13 text

Host View - Component Embedded View - Template

Slide 14

Slide 14 text

https://stackblitz.com/edit/angular-ivy-m4xzyg

Slide 15

Slide 15 text

https://stackblitz.com/edit/angular-ivy-m4xzyg

Slide 16

Slide 16 text

ChangeDetectorRef — Base class for Angular Views, provides change detection functionality. This class provides various methods related to change detection. ViewRef — Represents an Angular view specifically the host view defined by a component. This class extends the ChangeDetectorRef. Other than the methods inherited from the parent class it provides the method related to component/component view. EmbeddedViewRef — Represents an Angular view in a view container. An embedded view can be referenced from a component other than the hosting component whose template defines it, or it can be defined independently by a TemplateRef. ViewContainerRef — Represents a container where one or more views can be attached to a component. It can contain host views (created by instantiating a component with the createComponent() method), and embedded views (created by instantiating a TemplateRef with the createEmbeddedView() method).

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

ViewContainerRef An element (container) where you can put component or view as a sibling to this element https://stackblitz.com/edit/angular-ivy-nlp63b

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Angular Thailand Angular Developers Thailand

Slide 21

Slide 21 text

Contact me fb.me/siwat.kaolueng https://bit.ly/39pG6cd Slide siwat.kaolueng@gmail.com