V16 Superpowers

github.com/SeijiV13

seijivillafranca.com

Seiji Villafranca

github.com/SeijiV13

Senior Developer, Wypoon Technologies Netherlands

Microsoft MVP

Auth0 Ambassador

Community Lead, AngularPH,

Author

seijivillafranca.com

Talks

Once upon a time

Angular was born

There was components, modules, services

Observables

RxJs

Zone.Js

Directives

Routes

Forms

And Many More....

Just some History

2010: Angular JS was born

meant for internal projects for faster development

released as an open source project for frontend web applications

Ionic supported AngularJS for Mobile

2014 - 2015: The Great Rewrite

AngularJS is left with JavaScript advancements

Switched into a totally new pattern (from Controllers to Component Based)

Angular 2+

2018 - Present

Angular 2 ++

Opinionated Framework

Provides almost everything (Routes, Forms Etc.)

Yes it is a Framework that has the libraries you need

Reactive Programming

OOP Pattern

CLI for Schematics

There are always problems and rooms

for improvement!

Modules introduces boilerplate

components cant be shared without being imported in a module

Zone.JS checks all bindings

checks all bindings in all components for changes by default

Reactive Programming can be complex

RxJS alone can be complex

And V16 is here!

The Renaissance

another better version!

Angular in a different way

just like the great rewrite but better

(features)

Angular Signals

a new way of reactive programming

export class AuthorComponent {
  author = signal<Author>({
    firstName: '',
    lastName: '',

  });

  active = signal<boolean>(false);
  books = signal<number>(0);
  status = computed(() => this.books() > 3 ? 'Star' : 'Beginner')


  constructor() {
    effect(() => console.log(this.author()));
    effect(() => console.log(this.books()));
  }

  mutate(firstName: string, lastName: string) {
    this.author.mutate((author) => { author.firstName = firstName; 
    author.lastName = lastName });
  }
}

set(), update(), mutate(), computed()

Angular Signals

a new way of reactive programming

Next step for signals?

[Complete] Sub-RFC 3: Signal-based Components · angular/angular · Discussion #49682 (github.com)

@Component({
  signals: true,
  selector: 'temperature-calc',
  template: `
    <p>C: {{ celsius() }}</p>
    <p>F: {{ fahrenheit() }}</p>
  `,
})
export class SimpleCounter {
  celsius = signal(25);

  // The computed only re-evaluates if celsius() changes.
  fahrenheit = computed(() => this.celsius() * 1.8 + 32);
}

Hydration

Angular no longer re-renders the application from scratch

Hydration

Angular no longer re-renders the application from scratch

No content flickering on a page for end users

Future-proof architecture that enables fine-grained code loading with primitives we’ll ship later this year. Currently this surfaces in progressive lazy route hydration

Easy integration with existing apps, in just a few lines of code (see code snippet below)

Hydration

can be easily integrated into existing apps

import {
  bootstrapApplication,
  provideClientHydration,
} from '@angular/platform-browser';

...

bootstrapApplication(RootCmp, {
  providers: [provideClientHydration()]
});

Improved tooling for standalone components,

ng generate @angular/core:standalone

Standalone ng new collection

developer preview of the standalone schematics

migrate angular applications into standalone

ng new --standalone

Advancing developer tooling

lets make you happier

esbuild-based build system enters developer preview!


"architect": {
  "build": {                     /* Add the esbuild suffix  */
    "builder": "@angular-devkit/build-angular:browser-esbuild",

Using esbuild

Jest and Web Test Runner

npm install jest --save-dev

{
  "projects": {
    "my-app": {
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:jest",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "polyfills": ["zone.js", "zone.js/testing"]
          }
        }
      }
    }
  }
}

jest is now supported

Applying on angular.json

Installing jest

Autocomplete imports in templates

The language service now allows auto-import components and pipes.

Other Improvements

Required inputs

@Component(...)
export class App {
  @Input({ required: true }) title: string = '';
}

Passing router data as component inputs

const routes = [
  {
    path: 'home',
    loadComponent: import('./home'),
    resolve: { title: () => 'Amazing' }
  }
];

@Component(...)
export class About {
  @Input() title?: string;
}

Other Improvements

Self-closing tags

<amazing-component [prop]="var"/>

Flexible OnDestroy

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

@Injectable(...)
export class AppService {
  destroyRef = inject(DestroyRef);

  destroy() {
    this.destroyRef.onDestroy(() => /* cleanup */ );
  }
}