Standalone Components in Angular (Modern Angular)

Modern Angular supports **standalone components**, which means you can build apps without NgModules for most cases. ## What is a standalone component? A standalone component is a component that can be used directly without being declared inside a module. ## Example: Standalone component ```ts import { Component } from '@angular/core'; @Component({ selector: 'app-greeting', standalone: true, template: ` <h2>Welcome!</h2> <p>This is a standalone component.</p> `, }) export class GreetingComponent {} ``` ## Why it’s better for many teams - Fewer files and less “module wiring” - Easier to reuse components - Cleaner routing setup (especially for lazy loading) ## Importing dependencies (important) Standalone components use `imports`: ```ts import { CommonModule } from '@angular/common'; @Component({ selector: 'app-user', standalone: true, imports: [CommonModule], template: ` <p *ngIf="isOnline">User is online</p> `, }) export class UserComponent { isOnline = true; } ``` > Next: Learn templates and interpolation (show data on screen).