#standalone-components code explainers

typescript

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductRecommendationsComponent } from './product-recommendations.component';

Deferred loading with @defer in Angular

lazy-loading signals standalone-components

Intermediate 8 steps

typescript

import { Component, computed, input, model, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
interface Product {

Reactive filtering with Angular signals

signals computed two-way-binding

Intermediate 9 steps

typescript

import { Component, inject, signal } from '@angular/core';
import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs';

Drag-and-drop reordering with signals in Angular

drag-and-drop signals optimistic-update

Intermediate 8 steps

typescript

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { NgFor } from '@angular/common';

Building an active-route navbar in Angular

routing standalone-components accessibility

Intermediate 6 steps

typescript

import { Component, ChangeDetectionStrategy, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { toObservable } from '@angular/core/rxjs-interop';

Virtual scrolling a contact list in Angular

virtual-scrolling signals change-detection

Intermediate 6 steps