Angular Learning notes in English

Lesson 0: Reference book

This post is a notebook for Angular.
You can use it as reference to find directly what you need.

Learning pages

This accumulates different aspects including some references or my own notes.

https://angular.dev/tutorials/learn-angular#how-to-use-this-tutorial
https://angular.dev/guide/components
https://angular.dev/guide/templates/two-way-binding
https://angular.dev/api/forms/Validators
https://angular.dev/guide/templates/defer

Lesson 1 - Basics

Basic component

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    Hello
  `,
  styles: `
    :host {
      color: blue;
    }
  `,
})
export class AppComponent {}

Component has 3 things - typescript class, html template and css styles.

Templating

We use {{ }} in html templates to insert values:

template: `
  Username: {{ username }}
`,

docs:
https://angular.dev/guide/components

Using other comps

Use Imports and reference the comp in the template.
Imports is used as a tree in component usage in Angular.
While the import of code is still needed in JS/TS.

import {Component} from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    Username: {{ username }}
  `,
})
export class UserComponent {
  username = 'youngTech';
}

@Component({
  selector: 'app-root',
  template: `<section><app-user /></section>`,
  imports: [UserComponent],
})
export class AppComponent {}

If statements in templates

template: `
@if (isServerRunning){
  <span>Yes, the server is running</span>
}
@else {
  <span>Server is offline</span>
}
`,

For statements

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <h2>Users: </h2>
  <ul>
    @for (user of users; track user.id){
      <li>{{ user.name}}</li>
    }
  </ul>
  `,
})
export class AppComponent {
  users = [{id: 0, name: 'Sarah'}, {id: 1, name: 'Amy'}, {id: 2, name: 'Rachel'}, {id: 3, name: 'Jessica'}, {id: 4, name: 'Poornima'}];
  
}

The track tracks a key property, in our example it is user.id,
I static collections we can use track $index.

Property binding

MVS style binding of properties:

use [] on attributes:

template: `
  <div [contentEditable]="isEditable"></div>
`,

On Events

We use () on evenets to register to functions:
example:
<button (click)="greet()" >
All code:

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="greet()" >Press me</button>
  `,
})
export class AppComponent {
  greet(){
    alert("Hello there");
  }
}

@Input

Add decorator @Input to receive something as input

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <p>The user's name is {{ name }}</p>
  `,
})
export class UserComponent {
  @Input() name = '';
};

From other you use it:

<app-user name="bob"/>

@Output

Implements the observer pattern to communicate between child component and parent component.

@Outptu uses an EventEmitter to emit the event.

Child comp:

@Output() turtleAdded = new EventEmitter<string>();

this.turtleAdded.emit('🐢');

Parent comp:

<child-comp (turtleAdded)="addTurtle($event)" />

// ...

addTurtle(item:string){
    //...
}

Lesson 2 - Content

Routing

Routing is done in order for the framework to know what content we want to load when we access a path.

1. Routing:

   import {Routes} from '@angular/router';
   export const routes: Routes = [];

2. Config:

   import {ApplicationConfig} from '@angular/core';
   import {provideRouter} from '@angular/router';
   import {routes} from './app.routes';
   
   export const appConfig: ApplicationConfig = {
     providers: [provideRouter(routes)],
   };

3. Add router outlet:

   import {RouterOutlet} from '@angular/router';
   @Component({
     ...
     template: `
       <nav>
         <a href="/">Home</a>
         |
         <a href="/user">User</a>
       </nav>
       <router-outlet />
     `,
     imports: [RouterOutlet],
   })
   export class AppComponent {}

Add a route

Now to add a route path it’s simple as adding the route:

export const routes: Routes = [
    {
        path:'',
        component: HomeComponent,
        title:'App Home Page'
    },
];

SPA - Refresh content and not page

1. Add Router Link

   import { RouterLink, RouterOutlet } from '@angular/router';
   @Component({
   imports: [RouterLink, RouterOutlet],
   ...
   })

2. When linking to a route like using the <a></a> element, use RouterLink:

   import { RouterLink, RouterOutlet } from '@angular/router';
   @Component({
     ...
     template: `
       <a routerLink="/">Home</a>
       <a routerLink="/user">User</a>
     `,
     imports: [RouterLink, RouterOutlet],
   })

Forms

Angular has 2 types of forms:

• Template-Driven
• Reactive

Template driven forms

Import the Forms Module:

import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
@Component({
  template:`
    {{favoriteFramework}}
  `,
  imports: [FormsModule],
})
export class UserComponent {
    username = 'youngTech';
    favoriteFramework = '';
}

Use the “Banana in a box” to bind the property both ways.

<input id="framework" type="text" [(ngModel)]="favoriteFramework"/></label>

More on two way binding:

https://angular.dev/guide/templates/two-way-binding

To display it or use it access like any other variable:

template:`{{favoriteFramework}}`

Reactive forms

Reactive forms are driven by data streams with grouping of data into models.

Add ReactiveFormsModule:

import { ReactiveFormsModule } from '@angular/forms';
@Component({
  selector: 'app-root',
  template: `
    <form>
      <label>Name
        <input type="text" />
      </label>
      <label>Email
        <input type="email" />
      </label>
      <button type="submit">Submit</button>
    </form>
  `,
  imports: [ReactiveFormsModule],
})

Use the FormGroup and FormControl to create a model:

import {ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
...
export class AppComponent {
  profileForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
  });
}

In the template use [formGroup]="" and formControlName="" to indicate the variable to use.

To handle the submit event use the (ngSubmit)="" event handler.

To use the values access the form form.value.XXX where form is your form group and XXX is the name of the form control.

Final result:

import {Component} from '@angular/core';
import {ReactiveFormsModule, FormGroup, FormControl} from '@angular/forms';
@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="profileForm" (ngSubmit)="handleSubmit()">
      <label>
        Name: 
        <input type="text" formControlName="name" />
      </label>
      <label>
        Email: 
        <input type="email" formControlName="email" />
      </label>
      <button type="submit">Submit</button>
    </form>
  <p> {{ profileForm.value.name }}</p>
  <p>{{ profileForm.value.email }}</p>
  `,
  imports: [ReactiveFormsModule],
})
export class AppComponent {
  profileForm = new FormGroup({
    name: new FormControl(''),
    email : new FormControl(''),    
  });

  handleSubmit(){
      alert(this.profileForm.value.name + ' | ' + this.profileForm.value.email);
  }
}

Validating forms

Import validators:

import {ReactiveFormsModule, Validators} from '@angular/forms';
@Component({...})
export class AppComponent {}

Now simply add the validator to the form control:

profileForm = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email]),
});

Now to check if validation is ok use the valid property of the form group.

<button type="submit" [disabled]="!profileForm.valid">Submit</button>

More validators:

https://angular.dev/api/forms/Validators

Useful:

• min/max
• email
• pattern
• minLength/maxLength
• nullValidator

Use if statements or [ngStyle] or [ngClass]

<input [ngStyle]="{'border-color': !profileForm.valid  ? 'red' : 'green'}" type="text" formControlName="name" name="name" />

@if (!profileForm.valid){
<label style="color:red;">Not valid</label>
}

Dynamic forms

With dynamic forms we create programatically the form using FormGroups:

toFormGroup(questions: QuestionBase<string>[]) {
   const group: any = {};
   questions.forEach((question) => {
     group[question.key] = question.required
       ? new FormControl(question.value || '', Validators.required)
       : new FormControl(question.value || '');
   });
   return new FormGroup(group);
 }

now we can add a template that checks the control type and puts the proper html element:

@switch (question().controlType) {
   @case ('textbox') {
   <input [formControlName]="question().key" [id]="question().key" [type]="question().type" />
   }
   @case ('dropdown') {
   <select [id]="question().key" [formControlName]="question().key">
     @for (opt of question().options; track opt) {
     <option [value]="opt.key">
       {{ opt.value }}
     </option>
     }
   </select>
   }
   }
 </div>

Finally we want to input the questions using binding:

<app-question-app [questions]="questions$ | async" />

Serivces

Decorator @Injectable:

@Injectable({
    providedIn: 'root'
})

Provided in root - Available in all application.

Inject through the inject method:
myService = inject(MyService);

Full:

import {Component, inject} from '@angular/core';
import {MyService} from './my.service';

@component({
  selector:'app-root',
  template: `<span> Hello {{myService.GetName()}}</span>`,
})
export class AppComponent{
  myService = inject(MyService);
}

Constructor Injection

It’s simple as adding it to the ctor:

constructor(private carService: CarService) {
  this.display = carService.getCars().join(" | ");
}

private - use onyl from ctor
publiuc - if you want to access from template.

Pipes

Pipes are functions just with | syntax.
They allow explicit easy transformations.
Ex:

{{ username | lowercase }}.

import {UpperCasePipe} from '@angular/common';
@Component({
    ...
    template: `{{ loudMessage | uppercase }}`,
    imports: [UpperCasePipe],
})
class AppComponent {
    loudMessage = 'we think you are doing great!'
}

One useful use is to format output:

import {Component} from '@angular/core';
import {DecimalPipe, DatePipe, CurrencyPipe} from '@angular/common';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li>Number with "decimal" {{ num | number:"3.2-2" }}</li>
      <li>Date with "date" {{ birthday | date: 'medium' }}</li>
      <li>Currency with "currency" {{ cost | currency }}</li>
    </ul>
  `,
  imports: [DecimalPipe, DatePipe, CurrencyPipe],
})
export class AppComponent {
  num = 103.1234;
  birthday = new Date(2023, 3, 2);
  cost = 4560.34;
}

number [minIntegerDigits].[minFractionDigits]-[maxFractionDigits]

Create your own Pipe

@Pipe and implement PipeTransform.

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name:'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split("").reverse().join("");;
  }
}

Directives

Changes the behavior or structure of elements.
3 Types:

• Components - used inside templates
• Attribute - Changes apperance/behavior of element/component or another directive.
• Structural - changes dom.

Built in directives:

• NgClass
• NgStyle
• NgModel

Setting style for example using Record<string,string>:

currentStyles: Record<string, string> = {};
...
  setCurrentStyles() {
    // CSS styles: set per current state of component properties
    this.currentStyles = {
      'font-style': this.canSave ? 'italic' : 'normal',
      'font-weight': !this.isUnchanged ? 'bold' : 'normal',
      'font-size': this.isSpecial ? '24px' : '12px',
    };
  }

Standalone

If marked as standalone the directive doesn’t need to be part of an NgModule - this means it doesn’t need a special configuration or providers.

NgIf

Another example is the NgIf directive:

https://angular.dev/api/common/NgIf

Ex:

@Component({
  selector: 'ng-if-simple',
  template: `
    <button (click)="show = !show">{{ show ? 'hide' : 'show' }}</button>
    show = {{ show }}
    <br />
    <div *ngIf="show">Text to show</div>
  `,
  standalone: false,
})
export class NgIfSimple {
  show = true;
}

Lesson 3 - Styling

Basic styling

Basic styling adds css rules in styles of components:

@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,
  styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}

• Component styles are private but some angular rules such as ::ng-deep may promote it to global rule.

Style Urls

styleUrls - provide the url for a css file.

@Component({
  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,
  stylesurls:['./styleUrls .css']
})
export class HeroAppComponent {
/* . . . */
}

Component stlye customizations

1. Use CSS Custom properties - css variables
2. Declare global CSS with @mixin
3. Customize ::part
4. Typescript API.

Lesson 4 - Optimizations

@defer

@defer - load in lazy
on viewport - sets the trigger, available: idle, viewport, interaction, hover, immediate, timer.
more: https://angular.dev/guide/templates/defer

placeholder - Content to show while it is not loading.
loading - Content to show hwile it is loading.

minimum [] - time to show content before loading starts, can be used to avoid flickering.
after - after load begins - time to wait before showing the loading template.

@component({
    selector: 'app-root',
    template:`
    @defer (on viewport) {
        <comments />
    } @placeholder{
        <p>future...</p>
    } @loading (minimum 50ms) {
        <p>Loading comments...</p>
    }
    `,
    imports: [CommentComponent],
})
export class AppComponent{}

Optimize Image loading

NgOptimizedImage component.

1. Add import {NgOptimizedImage} from '@angular/common';
2. Comp import imports: [NgOptimizedImage],
3. Use ngSrc <img ngSrc="/assets/logo.svg"/>
4. Use width, height or fill if you dont want.
5. Optional add priority attribute to load it first.
6. Use providers for pre-load:

   providers: [
       provideImgixLoader('https://my.base.url/'),
   ]
   //.. Use ngSrc="image.png" without path

Lesson 5 - Debugging & Testing

Debugging

VSCode Launch JSON

We’ll need to configure the json file.
Use vite for easier usage, now you can debug it properly!

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/"
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: test",
      "url": "http://localhost:9876/debug.html"
    }
  ]
}

Angular State Inspector

We can use the angular state inspector to inspect state.

https://chromewebstore.google.com/detail/angular-state-inspector/nelkodgfpddgpdbcjinaaalphkfffbem?hl=en

Lesson 6 - State management

Angular uses services and it is possible to use the services as state management.
Using Observables we can make sure content is updated regularely and state can be managed.

We can combine Services with Signal or BehaviorSubject which both act as channel of communication.
BehaviorSubject is part of RxJS while signals are an Angular feature.

Services

Simple services can be used however it needs double updates, both for service and UI.

Service:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StateService {
  private count = 0; // Simple variable

  getCount(): number {
    return this.count;
  }

  setCount(value: number) {
    this.count = value;
  }
}

Comp:

import { Component } from '@angular/core';
import { StateService } from '../state.service';

@Component({
  selector: 'app-counter',
  template: `
    <h2>Counter: {{ count }}</h2>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  count = 0;

  constructor(private stateService: StateService) {
    this.count = this.stateService.getCount();
  }

  increment() {
    this.stateService.setCount(this.count + 1);
    this.count = this.stateService.getCount(); // Manually update UI
  }
}

Signals

import { Injectable, signal } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StateService {
  count = signal(0); // Signal-based state

  increment() {
    this.count.set(this.count() + 1); // Updates the signal
  }
}

import { Component } from '@angular/core';
import { StateService } from '../state.service';

@Component({
  selector: 'app-counter',
  template: `
    <h2>Counter: {{ count() }}</h2>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  constructor(private stateService: StateService) {}

  count = this.stateService.count;

  increment() {
    this.stateService.increment(); // Updates the state in service
  }
}

RxJS - BehaviorSubject

RxJS is a library that can help with reactive programming.
Using BehaviorSubject we can implmeent an easy update mechanism:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StateService {
  private countSubject = new BehaviorSubject<number>(0);
  count$ = this.countSubject.asObservable(); // Expose as observable

  increment() {
    this.countSubject.next(this.countSubject.value + 1); // Emit new state
  }
}

import { Component } from '@angular/core';
import { StateService } from '../state.service';

@Component({
  selector: 'app-counter',
  template: `
    <h2>Counter: {{ count }}</h2>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  count = 0;

  constructor(private stateService: StateService) {
    this.stateService.count$.subscribe(value => this.count = value);
  }

  increment() {
    this.stateService.increment();
  }
}

Signals vs RxJS

Signals:

• Automatic
• Angular 16+
• No async
• Cleaner code

RxJS:

• Needs subscription
• Any version
• Supports Async
• Heavier code

Redux

Redux is a more complicated form of the Observable pattern.
It implements global state management.

Events are Actions,
Dispatch create Actions.

A Store saves state.
Store has Reducers which are event handlers.

A reducer is an event handler which has the old state, the current state and returns the updated state.
It is called based on the Array.reduce function which takes an array as input and returns a single element.

Selector help to facade data access by accessing a specific data set in the store.

NgRx

NgRx is an implementation for the Redux patterns.
It works with Angular and RxJS.

I’ll use the walkthrought of NgRx to explain it:

1 Model

We need a model in order to describe our information.

export interface Book {
    id: string;
    volumeInfo: {
      title: string;
      authors: Array<string>;
    };
}

2 Actions and Action Creators

We’ll define source whic is categorization or a prefix for actions.
Actions are defined in the events property.
So why not just call it events? They are being fancy…

Event is a KV pair with name and some info.
Do we need the props<...>? Yes , it receives props.

import { createActionGroup, props } from '@ngrx/store';
import { Book } from '../books.model';

export const BooksActions = createActionGroup({
  source: 'Books',
  events: {
    'Add Book': props<{ bookId: string }>(),
    'Remove Book': props<{ bookId: string }>(),
  },
});

export const BooksApiActions = createActionGroup({
  source: 'Books API',
  events: {
    'Retrieved Book List': props<{ books: ReadonlyArray<Book> }>(),
  },
});

3 Reducer

A reducer is the entity that responds to actions.
Using createReducer we create a function that receives the books.

A reducer receives the previous state _state, receives the new state,
here it is a desctructed props { books },
and returns the new state.
In this example we return a filtered array on remove and extended array on add.

import { createReducer, on } from '@ngrx/store';
import { BooksActions } from './books.actions';

export const initialState: ReadonlyArray<string> = [];

export const collectionReducer = createReducer(
  initialState,
  on(BooksActions.removeBook, (state, { bookId }) =>
    state.filter((id) => id !== bookId)
  ),
  on(BooksActions.addBook, (state, { bookId }) => {
    console.log(`state ${state} bookId: ${bookId}`);
    if (state.indexOf(bookId) > -1) return state;
    console.log('adding book')
    return [...state, bookId];
  })
);

4 Selector

A selector is how we view the state, a facade to the state.
It will receive the updated version of the state.
createFeatureSelector creates the selector.

import { createSelector, createFeatureSelector } from '@ngrx/store';
import { Book } from '../books.model';

export const selectBooks = createFeatureSelector<ReadonlyArray<Book>>('books');

export const selectCollectionState =
  createFeatureSelector<ReadonlyArray<string>>('collection');

export const selectBookCollection = createSelector(
  selectBooks,
  selectCollectionState,
  (books, collection) => {
    if (collection===undefined){
        return [];
    }
      return collection.map((id) => books.find((book) => book.id === id)!);
  }
);

5 Dispatch

Now we need something to dispatch the actions.

We init a store in our component and see that we select using selectors to init the collections.
private store: Store creates a private class variable.

import { selectBookCollection, selectBooks } from './state/books.selectors';

export class BooksComponent implements OnInit {
  books$!: any;
  bookCollection$!: any;

  constructor(private booksService: GoogleBooksService, private store: Store) {
    this.books$ = this.store.select(selectBooks);
    this.bookCollection$ = this.store.select(selectBookCollection);
  }
// .... more here

Dispatching is easy, we use the Books actions to create a new action of the sort we need.
onAdd and onRemove can be called from the UI and that’s how the UI activates global state change.

onAdd(bookId: string) {
  this.store.dispatch(BooksActions.addBook({ bookId }));
}

onRemove(bookId: string) {
  this.store.dispatch(BooksActions.removeBook({ bookId }));
}

6 Register module - Old API

Using the module we’ll register the store.
This is true for Angular 18+.

import { booksReducer } from './state/books.reducer';
import { collectionReducer } from './state/collection.reducer';
import { StoreModule } from '@ngrx/store';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { BookListComponent } from './book-list.component';
import { BookCollectionComponent } from './book-collection.component';
import { BooksComponent } from './books-component';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap: [],
  imports: [
    BooksComponent,
    BookCollectionComponent,
    BookListComponent,
    CommonModule,
    BrowserModule,
    StoreModule.forRoot({}),
    StoreModule.forFeature('books', booksReducer), // Register 'books' feature
    StoreModule.forFeature('collection', collectionReducer), // Register 'books' feature
  ],
})
export class AppModule {}

7 Register Provider - New API

This uses the config in order to register a store.
using:

provideStore({
     books: booksReducer, // Your reducer here
     collection: collectionReducer,
   }),

Full code:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import {
  provideClientHydration,
  withEventReplay,
} from '@angular/platform-browser';
import { provideStore } from '@ngrx/store';
import { provideHttpClient } from '@angular/common/http';
import { booksReducer } from './state/books.reducer';
import { collectionReducer } from './state/collection.reducer';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(withEventReplay()),
    provideHttpClient(),
    provideStore({
      books: booksReducer, // Your reducer here
      collection: collectionReducer,
    }),
  ],
};

8 That’s it!

Now you have a full NgRx action-reducer store working!

Lesson 7 - Advanced

View queries of children

https://angular.dev/guide/components/queries

View or content queries use locators in order to find children based on a query that performs on the element or the dom content.

In this query we get the ElementRef that is a button with the id save.
viewChild returns first found, viewChildren returns a list.

@Component({
  /*...*/
  template: `
    <button #save>Save</button>
    <button #cancel>Cancel</button>
  `
})
export class ActionBar {
  saveButton = viewChild<ElementRef<HTMLButtonElement>>('save');
}

@ViewChild

Uses a selector to search for the first child it can find.
The directive may be used on functions or variables.

https://angular.dev/api/core/ViewChild

Example of searching for child , use ngAfterViewInit to access it.

import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core';
@Directive({
  selector: 'child-directive',
  standalone: false,
})
class ChildDirective {}
@Component({
  selector: 'someCmp',
  templateUrl: 'someCmp.html',
  standalone: false,
})
class SomeCmp implements AfterViewInit {
  @ViewChild(ChildDirective) child!: ChildDirective;
  ngAfterViewInit() {
    // child is set
  }
}

@ViewChildren

Like @ViewChildren but with multiple results.

When ngAfterViewInit is called the view query already has been executed.

@ContentChild

Configures a Content query to look for a child .

@Directive({
  selector: 'pane',
  standalone: false,
})
export class Pane {
  @Input() id!: string;
}
@Component({
  selector: 'tab',
  template: ` <div>pane: {{ pane?.id }}</div>`,
  standalone: false,
})
export class Tab {
  @ContentChild(Pane) pane!: Pane;
}

@ContentChildren

To-do

Intermediate Angular Topics

Component Communication

• @Input() and @Output()
• EventEmitter
• ViewChild, ContentChild, and ViewChildren
• Services and BehaviorSubject for communication

Reactive Forms & Validation

• FormBuilder and FormGroup
• Custom Validators and Async Validators
• Dynamic Forms

Routing & Navigation

• Lazy Loading Modules
• Route Guards (AuthGuard, CanActivate, CanDeactivate)
• Resolvers for Pre-fetching Data
• Query Parameters and Route Params

State Management Options

• RxJS with Services
• NgRx (Redux for Angular)
• Akita or NGXS

Dependency Injection & Providers

• Injectable Services
• Hierarchical Dependency Injection
• Factory Providers

Pipes & Directives

• Custom Pipes
• Custom Structural & Attribute Directives

Performance Optimization

• OnPush Change Detection
• TrackBy in *ngFor
• Lazy Loading and Code Splitting

Unit Testing & Debugging

• Karma & Jasmine for Component and Service Testing
• TestBed and Mocking Dependencies
• Debugging with Augury

Advanced Angular Topics

Advanced RxJS & Reactive Programming

• Subjects (BehaviorSubject, ReplaySubject, AsyncSubject)
• Operators (switchMap, mergeMap, exhaustMap)
• Handling Memory Leaks with takeUntil

Advanced State Management

• NgRx Effects and Selectors
• Optimizing NgRx Performance
• Modularizing State

Micro Frontends with Angular

• Module Federation (Webpack 5)
• Dynamic Component Loading
• Sharing State Between Micro Frontends

Web Components & Angular Elements

• Creating Web Components with Angular
• Using Angular Elements Outside Angular

Performance Profiling & Optimization

• Profiling with Chrome DevTools
• Web Workers in Angular
• Server-Side Rendering (SSR) with Angular Universal

Progressive Web Apps (PWA)

• Service Workers
• Background Sync
• Caching Strategies

Authentication & Security

• JWT Authentication
• OAuth & OpenID Connect
• CSRF & CORS Handling

GraphQL with Angular

• Apollo Angular for GraphQL Integration
• Query, Mutation, Subscription Handling

Custom Angular CLI Schematics

• Automating Project Scaffolding
• Custom Builders for CLI Extensions

Internationalization (i18n) & Localization (l10n)

• ngx-translate
• Angular’s Built-in i18n Support