Anything New?

<div *ngIf="loggedIn; else anonymousUser">
  The user is logged in
</div>
<ng-template #anonymousUser>
  The user is not logged in
</ng-template>

@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}

import { NgFor} from '@angular/common';

@Component({
  standalone: true,
  imports: [ NgFor ],
  template: ` 
		<ul>
			<li *ngFor="let ingredient of ingredientList; trackBy: trackByIngredientFn">
    			{{ ingredient.quantity }} - {{ ingredient.name }}
    		</li>
		</ul>
` 
})

@Component({
  standalone: true,
  template: ` 
		<ul>
  			@for (ingredient of ingredientList; track ingredient.name) {
    			<li>{{ ingredient.quantity }} - {{ ingredient.name }}</li>
  			}
			@empty {
				<li> There are no items.</li>
			}
		</ul>
` 
})

<ng-container [ngSwitch]="accessLevel">
  <admin-dashboard *ngSwitchCase="admin"/>
  <moderator-dashboard *ngSwitchCase="moderator"/>
  <user-dashboard *ngSwitchDefault/>
</ng-container>

@switch (accessLevel) {
  @case ('admin') { <admin-dashboard/> }
  @case ('moderator') { <moderator-dashboard/> }
  @default { <user-dashboard/> }
}

ng generate @angular/core:control-flow

@defer (on viewport) {
  <comment-list/>
} @loading {
  Loading…
} @error {
  Loading failed :(
} @placeholder {
  <img src="comments-placeholder.png">
}

<button type="button" #searchButton>Search</button>

@defer (on interaction(searchButton)) {
  <search-results />
} @loading {
  <div> loading items</div>
}

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

@Input({ required: true }) bankName!: string;
@Input({ transform: booleanAttribute }) status: boolean;
// ROUTER PARAM!
@Input({ alias:'account-id', transform: numberAttribute }) id: number;

import { input, numberAttribute, booleanAttribute } from '@angular/core';

bankName = input.required<string>();
status = input(false, { transform: booleanAttribute });
// ROUTER PARAM!
id = input<number>({ alias:'account-id', transform: numberAttribute });

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

@Component({
  selector: 'custom-checkbox',
  template: '<div (click)="toggle()"> ... </div>',
})
export class CustomCheckbox {
  checked = model(false);
  disabled = input(false);

  toggle() {
    // While standard inputs are read-only, you can write directly to model inputs.
    this.checked.set(!this.checked());
  }
}

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

@Component({
  selector: 'custom-checkbox',
  template: '<div (click)="toggle()"> ... </div>',
})
export class CustomCheckbox {
  checked = model(false);
  disabled = input(false);

  toggle() {
    // While standard inputs are read-only, you can write directly to model inputs.
    this.checked.set(!this.checked());
  }
}

bootstrapApplication(App, {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true })
  ]
});

bootstrapApplication(AppComponent, {
  providers: [
    // 👇
    provideExperimentalZonelessChangeDetection()
  ]
});

@Component({
  selector: 'app-profile',
  template: `
    <ng-content select=".greeting">Hello </ng-content>

    <ng-content>Unknown user</ng-content>
  `,
})
export class Profile {}

<app-profile>
  <span class="greeting">Good morning </span>
</app-profile>

<span class="greeting">Good morning </span>
Unknown user

@Component({ ... })
export class UserForm {
            
  private fb = inject(NonNullableFormBuilder);
  
  userForm = this.fb.group({
    login: ['', Validators.required],
    password: ['', Validators.required]
  });

  constructor() {
    this.userForm.events.subscribe(event => {
      if (event instanceof TouchedChangeEvent) {
        console.log('Touched: ', event.touched);
      } else if (event instanceof PristineChangeEvent) {
        console.log('Pristine: ', event.pristine);
      } else if (event instanceof StatusChangeEvent) {
        console.log('Status: ', event.status);
      } else if (event instanceof ValueChangeEvent) {
        console.log('Value: ', event.value);
      } else if (event instanceof FormResetEvent) {
        console.log('Form reset');
      } else if (event instanceof FormSubmitEvent) {
        console.log('Form submit');
      }
    });
  }
}

const routes: Routes = [
  { path: "first-component", component: FirstComponent },
  {
    path: "old-user-page",
    redirectTo: ({ queryParams }) => {
      const errorHandler = inject(ErrorHandler);
      const userIdParam = queryParams['userId'];
      if (userIdParam !== undefined) {
        return `/user/${userIdParam}`;
      } else {
        errorHandler.handleError(
          new Error('Attempted navigation to user page without user ID.')
        );
        return `/not-found`;
      }
    },
  },
  {
    path: 'users',
    component: UsersComponent,
    canActivate: [
      () => {
        const userService = inject(UserService);
        return userService.isLoggedIn() || new RedirectCommand(router.parseUrl('/login'), {
          state: { requestedUrl: 'users' } 
        });
      }
    ],
  },
  { path: "user/:userId", component: OtherComponent },
];

@for (user of users; track user.id) {
  @let statusMessage = user.isActive ? 'Active' : 'Inactive';
  <div>
    <p>{{ user.name }} - Status: {{ statusMessage }}</p>
  </div>
}

<div>
  @let data = (data$ | async);
  @let processedData = data ? data.map(item => item.value) : [];
  <ul>
    @for (item of processedData; track item) {
      <li>{{ item }}</li>
    }
  </ul>
</div>

"compilerOptions": {
    ...
    "isolatedModules": true
}

export class UserComponent {
  private userService = inject(UserService);
}

export class UserComponent {
  constructor(private userService: UserService) {}
}

ng g @angular/core:inject

{
  path: 'users',
  loadComponent: () => import('./users/users.component').then(m => m.UsersComponent)
}

{
  path: 'users',
  component: UsersComponent
}

ng g @angular/core:route-lazy-loading

{
  "angularCompilerOptions": {
    "strictStandalone": true
  }
}

TS-998113: Imports array contains unused imports [plugin angular-compiler]

src/app/user/users.component.ts:9:27:
  9 │   imports: [UserComponent, UnusedComponent],
    ╵                            ~~~~~~~~~~~~~

ng generate @angular/core:signal-input-migration
ng generate @angular/core:signal-queries-migration
ng generate @angular/core:output-migration

ng generate @angular/core:signals

export class ItemListComponent {
  items = input.required<ItemModel[]>();
  // ✅ This is recommended
  selectedItem = linkedSignal(() => this.items()[0]);
}

export class ItemListComponent {
 items = input.required<ItemModel[]>();
 selectedItem = signal<ItemModel | undefined>(undefined);
  
  constructor() {
  	// ⚠️ This is not recommended
  	effect(() => {
    	this.selectedItem.set(this.items()[0]);
  	});
  }
  
  pickItem(item: ItemModel) {
    this.selectedItem.set(item);
  }
  
}

@Component({/* ... */})
export class ShippingMethodPicker {
  shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();
  
  selectedOption = linkedSignal<ShippingMethod[], ShippingMethod>({
    // `selectedOption` is set to the `computation` result whenever this `source` changes.
    source: this.shippingOptions,
    computation: (newOptions, previous) => {
      // If the newOptions contain the previously selected option, preserve that selection.
      // Otherwise, default to the first option.
      return newOptions.find(opt => opt.id === previous?.value?.id) ?? newOptions[0];
    } 
  });
  changeShipping(newOptionIndex: number) {
    this.selectedOption.set(this.shippingOptions()[newOptionIndex]);
  }
}

ng generate @angular/core:signal-input-migration
ng generate @angular/core:signal-queries-migration
ng generate @angular/core:output-migration

ng generate @angular/core:signals