🔹 Angular Standalone Components

✅ Key Features of Standalone Components

• No need for NgModules – Components, directives, and pipes can now exist independently.
• Imports Array – Dependencies are declared directly inside the component.
• Simpler App Bootstrapping – Use bootstrapApplication() instead of AppModule.
• Better Tree-Shaking – Smaller bundle size by including only used components.
• Lazy Loading Made Easy – Routes can directly reference standalone components.

🔑 Key Differences from Traditional Components

• Decoupled from NgModules: No need to declare in an NgModule’s declarations array.
• Direct Dependencies: Use the imports array to declare dependencies.
• Simplified Bootstrapping: Use bootstrapApplication() instead of an AppModule.

✅ Benefits of Using Standalone Components

• Reduced Boilerplate: No need to declare components in NgModule. Eliminates the overhead of managing declarations, imports, and exports across multiple modules. Perfect for small utilities, feature components, or micro frontends.
• Improved Tree-Shaking: Only the explicitly imported dependencies are bundled. Angular’s build process can more effectively eliminate unused code. Results in smaller bundle sizes and faster load times
• Enhanced Reusability: Portable and self-contained.You can reuse them across different apps or modules without tight coupling. Ideal for building shared libraries or design systems
• Simplified Lazy Loading: Direct routing to components without feature modules.No need to create a separate lazy-loaded module. Makes route-based code splitting cleaner and more intuitive
• Easier Testing: Isolated setup with minimal dependencies. No need to mock or configure unrelated module-level dependencies
• 🧠 Clear Separation of Concerns : Promotes the Single Responsibility Principle. Each component focuses on its own logic, template, and dependencies. Easier to maintain, debug, and document.
• 🛠️ Incremental Adoption : You don’t need to refactor your entire app. Standalone components can coexist with traditional NgModule-based components. Angular CLI even provides migration tools to help transition gradually.

✅ Syntax

@Component({
  selector: 'app-example',
  standalone: true,   // 👈 This makes it standalone
  imports: [],        // 👈 You declare dependencies here
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {}

🔹 Example: Standalone Component in Angular

1. main.ts (bootstrapping without AppModule)

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

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

2. app.component.ts (Standalone root component)

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CounterComponent } from './counter.component';

@Component({
  selector: 'app-root',
  standalone: true,               // 👈 Standalone root
  imports: [CommonModule, CounterComponent], // 👈 Import dependencies/components
  template: `
    <h1>🚀 Angular Standalone Components Example</h1>
    <app-counter></app-counter>
  `
})
export class AppComponent {}

3. counter.component.ts (Another standalone component)

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-counter',
  standalone: true,   // 👈 Standalone
  imports: [CommonModule],
  template: `
    <h2>Counter: {{ count }}</h2>
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
  `
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

🔹 How it Works

🧪 Another Example: Creating a Standalone Component

1. Generate the Component

ng generate component greeting --standalone

2. Component File

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-greeting',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="greeting-card">
      <p>{{ message }}</p>
    </div>
  `,
  styles: `
    .greeting-card {
      border: 1px solid #ccc;
      padding: 16px;
      border-radius: 8px;
      background-color: #f9f9f9;
    }
  `
})
export class GreetingComponent {
  message = 'Hello from a standalone component!';
}

3. Using the Standalone Component

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { GreetingComponent } from './greeting/greeting.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, GreetingComponent],
  template: `
    <main>
      <h1>My Standalone App</h1>
      <app-greeting></app-greeting>
    </main>
    <router-outlet></router-outlet>
  `,
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-standalone-app';
}

📌 Best Practices

• Start new projects with standalone: Simplifies structure from day one.
• Use incrementally: Mix with NgModules during gradual migration.
• Use migration tool: Run ng generate @angular/core:standalone to convert existing components.

✅ Summary

Standalone Components simplify Angular development by removing the dependency on NgModules, making the codebase cleaner, easier to understand, and more modular.