NgModules vs Standalone Components

Two ways an Angular app is wired together

Every component needs to know which other pieces it can use — other components, directives, pipes. Angular has had two systems for declaring this, and you will run into both in real codebases.

• NgModules (the old default) — a central @NgModule file lists every component, directive and pipe in a feature, plus what it imports and exports.
• Standalone components (the modern default, Angular 15+) — each component declares its own imports directly, and there is no NgModule at all.

The old way: an NgModule

In NgModule apps, you register components in a module’s declarations and bring in features through imports. New components must be added to a module before they work.

// app.module.ts (older style)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { GreetingComponent } from './greeting.component';

@NgModule({
  declarations: [AppComponent, GreetingComponent],   // your components
  imports: [BrowserModule, FormsModule],             // features you use
  bootstrap: [AppComponent]
})
export class AppModule {}

The modern way: standalone

A standalone component sets standalone: true and lists exactly what it needs in its own imports. No NgModule, less indirection — what a component uses is written right on the component.

// greeting.component.ts (modern standalone style)
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-greeting',
  standalone: true,
  imports: [FormsModule],            // this component’s own needs
  template: '<input [(ngModel)]="name"><p>Hi {{ name }}</p>'
})
export class GreetingComponent {
  name = '';
}