No products found!
} ``` Explanation: * `@if` decides whether the block of HTML should exist in the DOM at all. * If `products.length > 0`, Angular adds the ``. Legacy note (older Angular): ```html
No products found!
``` `*ngIf` is still supported, but the new `@if` syntax is the recommended style going forward. --- ## Looping over data with @for Let’s populate some mock products: ```ts // product-list.ts export class ProductList { products: Product[] = [ { id: 1, title: 'Keyboard' }, { id: 2, title: 'Microphone' }, { id: 3, title: 'Web camera' }, { id: 4, title: 'Tablet' } ]; } ``` Now, use `@for` in the template: ```htmlNo products found!
}No products found!
}No products found!
}You selected: {{ selectedProduct.title }}
} ``` Explanation: * `(click)="selectedProduct = product"` listens for the browser’s `click` event and executes the assignment in the component instance. * `selectedProduct` becomes the currently clicked product, and the `@if` block below reacts by showing its title. --- # Styling Components and View Encapsulation Angular lets you bind classes and styles dynamically. ## Class binding ```html{{ selectedProduct ? 'Product chosen' : 'No product selected' }}
``` Explanation: * `[style.color]` controls a single style property dynamically, based on component state. ## View encapsulation By default, Angular scopes CSS per component (Emulated mode), so styles from `product-list.css` will only affect that component’s template. ```ts import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'app-product-detail', templateUrl: './product-detail.html', styleUrl: './product-detail.css', standalone: true, encapsulation: ViewEncapsulation.Emulated // default }) export class ProductDetail { } ``` If you explicitly set: ```ts encapsulation: ViewEncapsulation.None ``` then styles defined in `product-detail.css` can leak into other parts of the app. This can be useful for global styling, but must be used carefully. --- # Passing Data Between Components (Inputs and Outputs) Real-world applications rarely keep all UI in a single component. Often, a parent component owns the data and passes a piece of it down to a child component. ## Passing data down with input() Create a detail component: ```ts // src/app/product-detail/product-detail.ts import { Component, input } from '@angular/core'; import type { Product } from '../product-list/product-list'; @Component({ selector: 'app-product-detail', templateUrl: './product-detail.html', styleUrl: './product-detail.css', standalone: true }) export class ProductDetail { product = inputYou selected: {{ product()!.title }}
} ``` Explanation: * `product = inputNo products found!
}You selected: {{ product()!.title }}
Detail says: {{ detail.product()!.title }}
``` Explanation: * `#detail` creates a template reference to the `ProductDetail` instance. * This reference exposes the public API of `ProductDetail` (here: `product()`). ## Querying a child in TypeScript with viewChild You can also get the child instance from the parent class: ```ts // product-list.ts import { Component, AfterViewInit, viewChild } from '@angular/core'; import { ProductDetail } from '../product-detail/product-detail'; @Component({ selector: 'app-product-list', templateUrl: './product-list.html', styleUrl: './product-list.css', standalone: true, imports: [ProductDetail] }) export class ProductList implements AfterViewInit { productDetail = viewChild(ProductDetail); ngAfterViewInit(): void { console.log('Detail product:', this.productDetail()?.product()); } } ``` Explanation: * `viewChild(ProductDetail)` tells Angular to look for a `ProductDetail` in this component’s view. * `ngAfterViewInit` is the hook where the child is guaranteed to be created and accessible. Legacy note: Previously: ```ts @ViewChild(ProductDetail) productDetail!: ProductDetail; ``` --- # Change Detection Strategy Angular automatically refreshes views when data changes. By default, it runs change detection for the entire component tree on each relevant event. You can optimize this with `ChangeDetectionStrategy.OnPush`: ```ts import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'app-product-detail', templateUrl: './product-detail.html', styleUrl: './product-detail.css', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush }) export class ProductDetail { // ... } ``` Explanation: * With `OnPush`, Angular will only re-check this component when: * An input reference changes * An event handler on this component runs * An observable bound in the template emits (via async pipe), etc. * This significantly improves performance in large and complex UIs. --- # Lifecycle Hooks Overview Lifecycle hooks allow you to run custom logic at specific moments in a component’s life. Common hooks: * `ngOnInit` – runs after the component’s inputs are first set. * `ngOnDestroy` – runs right before Angular removes the component from the DOM. * `ngOnChanges` – runs whenever an input binding changes. * `ngAfterViewInit` – runs after the view and child views have been initialized. Example: ```ts import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-product-detail', templateUrl: './product-detail.html', styleUrl: './product-detail.css', standalone: true }) export class ProductDetail implements OnInit, OnDestroy, OnChanges, AfterViewInit { ngOnInit(): void { // Good place to fetch data or initialize values console.log('ProductDetail initialized'); } ngOnChanges(changes: SimpleChanges): void { // React to input changes console.log('Changes:', changes); } ngAfterViewInit(): void { // Child components and view are ready console.log('View initialized'); } ngOnDestroy(): void { // Cleanup: timers, subscriptions, listeners, etc. console.log('ProductDetail destroyed'); } } ``` Explanation: * Each hook gives you a predictable place to put specific kinds of logic: * `ngOnInit` instead of doing heavy work in the constructor. * `ngOnDestroy` to release resources. * `ngOnChanges` to react to new input values. * `ngAfterViewInit` to work with child components or DOM elements that weren’t available earlier. --- # Summary In this chapter you have seen how, in **Angular 20**: * Components are generated with **simpler file names** like `product-list.ts`, `product-list.html`, `product-list.css`. * Standalone components (`standalone: true`) and explicit `imports` have become the default way to structure an app. * The modern control-flow syntax (`@if`, `@for`, `@switch`) replaces older structural directives in new code, while you still need to understand `*ngIf`, `*ngFor` and `ngSwitch` for legacy templates. * Data flows into components via `input()` and out via `output()`, replacing `@Input` and `@Output` in new code. * Class and style bindings, along with view encapsulation, give you fine control over component-level CSS. * Template reference variables and `viewChild` let you reach deeper into the component tree when necessary. * Change detection strategies and lifecycle hooks help you tune both performance and behavior. [1]: https://blog.ninja-squad.com/2025/05/28/what-is-new-angular-20.0?utm_source=chatgpt.com "What's new in Angular 20.0? - The Ninja Squad blog"