What's Angular View?

Transcript

1. What's Angular View? Siwat Kaolueng https://perjerz.netlify.com
2. Siwat Kaolueng (Jame) Independent Web & Angular Consultant - Organize Angular Thailand
3. What you will learn - Use-case - View, ViewContainerRef
4. Use-case
5. Structural Directive (*ngIf, *ngFor) https://angular.io/guide/structural-directives#structural-directive-shorthand
6. Custom Structural Directive https://stackblitz.com/github/zetsnotdead/ng-carousel
8. Dynamic Component https://stackblitz.com/angular/xejegxgbjmy
9. Manual Change Detection https://stackblitz.com/edit/change-detection-visualization-bv6f2l
10. The Last Guide For Angular Change Detection You'll Ever Need - Mokkapps (Michael Hoffmann) - Senior Freelance Fullstack Developer
11. View The smallest grouping of display elements that can be created and destroyed together - Angular Document Angular data structure holding DOM elements - Me
12. Every component has a component view associated with it
13. Host View - Component Embedded View - Template
14. https://stackblitz.com/edit/angular-ivy-m4xzyg
15. https://stackblitz.com/edit/angular-ivy-m4xzyg
16. 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).
18. ViewContainerRef An element (container) where you can put component or view as a sibling to this element https://stackblitz.com/edit/angular-ivy-nlp63b
20. Angular Thailand Angular Developers Thailand
21. Contact me fb.me/siwat.kaolueng https://bit.ly/39pG6cd Slide siwat.kaolueng@gmail.com