Angular

(5.5 h)

Signal

(+1 h)

March 1, 2024

Components • Angular

Details

• Accepting data with input properties
• Custom events with outputs
• Content projection with ng-content
  • "You cannot add directives, styles, or arbitrary attributes to <ng-content>."
  • "You should not conditionally include <ng-content> with ngIf, ngFor, or ngSwitch. For conditional rendering of component content, see Template fragments."
• Host elements
• Lifecycle
  • During initialization: constructor -change detection-> ngOnChanges -> ngOnInt -> ngDoCheck -> ngAfterXxxInit -> ngAfterXxxChecked -rendering-> afterRender
  • Subsequent updates: change detection ngOnChanges -> ngDoCheck -> ngAfterXxxChecked -rendering-> afterRender

Feature preview - Developer guides

Details

• Signal
  • Writable and computed signals
  • Effects
• Signal inputs
  • Optional/required Inputs
  • Alias
• Model inputs

Components

(+0.5 h)

January 28, 2024

Components • Angular

Details

• Anatomy of components
• Importing and using components
  • "The Angular team recommends using standalone components for all new development."
• Selectors
  • Selector prefixes - "The Angular team recommends using a short, consistent prefix for all the custom components defined inside your project."
  • When to use an attribute selector - "You should consider an attribute selector when you want to create a component on a standard native element."
• Styling
  • ViewEncapsulation.Emulated: scoped, but other global styles can affect
  • ViewEncapsulation.ShadowDom: scoped, and global styles cannot affect
  • ViewEncapsulation.None: global

v17 Tutorial

(+1.5 h)

January 27, 2024

Interactive tutorial for v17

Details

• Composing Components
  • imports and selector
• Control Flow in Components (Template syntax)
  • @if, @else
  • @for, track
• Deferrable Views
  • @defer with on viewport
  • @placeholder with minimum
  • @loading with minimum and after
• Optimizing images
  • NgOptimizedImage and ngSrc
  • layout shift
  • priority for LCP element
  • image loader
• Two-way binding
  • [()], aka "banana in a box"
  • [(ngModel)] in FormsModule
• Reactive forms
  • <form [formGroup]=...
  • <form (ngSubmit)=...
  • Validators and form.valid
• DI (Dependency injection)
  • Creating an injectable service by @injectable
  • Inject
    • inject()
    • constructor-based DI
• Pipes
  • Built-in pipes: DatePipe, DecimalPipe, CurrencyPipe, ...
  • Custom pipes with @Pipe

Homes tutorial

(+2.5 h)

January 26, 2024

First App Tutorial - Angular Homes

Details

• Component
  • Metadata
  • @Input decorator - component props
  • Prop binding - [attribute]="value"
  • Event binding - (event)="handler"
  • Template reference variable - #var
  • Interpolation -
  • *ngFor (CommonModule)
• Interface
• Angular services (@angular/core)
  • Dependency injection
• Angular router (@angular/router)
  • ActivetedRoute (route.snapshot.params['id'])
  • <router-outlet>
• ReactiveFormsModule
• HTTP communication