This project demonstrates the latest features of Angular 18, including control flow blocks, signals, deferred views, and view transitions. It is organized as a showcase for learning and experimenting with Angular's new capabilities.
- angular18/: Main Angular application folder
- src/app/: Contains all feature demo components
- app.component.ts: Root component, sets up meta tags and SSR features
- control-flow/: Demonstrates new control flow blocks (
@if,@for,@switch, etc.) - deferred/: Shows how to use
@deferfor lazy loading views based on triggers (viewport, interaction) - first/: Basic starter component
- signals/: Demonstrates Angular Signals for reactive state management
- transitions/: Contains
page-oneandpage-twocomponents to showcase view transitions
Sets up the application shell, meta tags for SEO, and logs browser support for view transitions. Uses Angular's SSR capabilities.
Demonstrates Angular 18's new control flow syntax:
- Conditional rendering with
@if - Iteration with
@for - Switch-case logic with
@switch - Dynamic toggling of item lists
- Example of a heavy operation for deferred loading
Uses the @defer block to load content based on triggers:
- on viewport: Loads when scrolled into view
- on interaction: Loads after user interaction
- Includes placeholders, loading states, and error handling
- Improves performance by deferring heavy content
Basic starter component for demonstration purposes.
Showcases Angular Signals:
- Basic, computed, object, and array signals
- Input and model signals for binding
- Effects for reactive side effects
- Methods to update signals and demonstrate reactivity
Demonstrate view transitions between pages:
- Uses
view-transition-namefor smooth animated transitions - Navigation between pages using Angular Router
- Install dependencies:
cd angular18/angular18 npm install - Start the development server:
npm start # or ng serve - Open in browser: Visit http://localhost:4200
Run unit tests with:
ng testBuild the project for production:
ng build