Intro
- Introduction
- Source code and install process
Basic Level
- @Component decorator
- Building a new component
- Progress bar component: Component styles (:host)
- @Input decorator & property bindings
- Countdown component: ngOnInit lifecycle hook
- @Output decorator, EventEmitter & event bindings
- Using child component methods via Template Reference Variable
- Lifecycle hooks: ngOnChange & ngOnDestroy
Intermediate Level
- Stateful VS Stateless Components
- Source code & install process
- Presentational Components (stateless)
- Containers (stateful components)
- Moving logic to a service (Single Responsibility Principle)
- Providers at a component and module levels
- Observables & Subjects: Emitting events from a service
- BehaviourSubject & AsyncPipe
- Good practices - Getters or how to avoid logic inside templates
- Default change detection strategy
- OnPush change detection strategy
- Component styles encapsulation (shadow DOM)
Advanced Level
- Content projection with ng-content
- ng-content and projection slots
- ng-content & Don't Repeat Yourself (DRY) strategies
- Access parent component from code
- @ContentChild: access the projected content
- @ContentChildren & QueryList: access the projected content
- @ViewChild: access child component
- @ViewChildren & QueryList: access children components
- ElementRef and NativeElement
- Renderer: Platform Agnostic Render
- ng-container - grouping elements without a wrapper
- ng-template - repeating content into the DOM
- Creating Dynamic Components
- Dynamic Components: Inputs and Outputs
- Dynamic Components: Creation and Destruction
- Final thoughts
