arifshaikh-official

// Signal-based transformation
disabled = input(false, {
  transform: (value: boolean | string) => typeof value === 'string' ? value === '' : value
});

arifshaikh-official

const options = signal(['A', 'B', 'C']);

// The selected option resets to the first item whenever 'options' changes
const selectedOption = linkedSignal({
  source: options,
  computation: (newOptions) => newOptions[0]
});

// User can still manually change it
selectedOption.set('B');

arifshaikh-official

import { bootstrapApplication } from '@angular/platform-browser';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';
import { AppComponent } from './app/app.component';

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

arifshaikh-official

@switch (userRole) {
  @case ('admin') { <admin-panel /> }
  @case ('editor') { <editor-tools /> }
  @default { <reader-view /> }
}

arifshaikh-official

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items found in the list.</li>
}

arifshaikh-official

@if (user.isLoggedIn) {
  <p>Welcome back, {{ user.name }}!</p>
} @else if (user.isGuest) {
  <p>Please sign up.</p>
} @else {
  <p>Identify yourself.</p>
}

arifshaikh-official

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

// Define a signal
count = signal(0);

// Define a derived/computed value
doubleCount = computed(() => this.count() * 2);

// Update the signal
increment() {

arifshaikh-official

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),      // Configures Routing
    provideHttpClient(),       // Configures HTTP Client

arifshaikh-official

@Pipe({ name: 'exponentialStrength' })
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: number): number {
    return Math.pow(value, exponent);
  }
}

arifshaikh-official

constructor(private dataService: DataService) { }