NgModules

Relax. We'll talk through this in plain words — no textbook voice.

NgModule is used to organize an Angular application. It groups Components, Directives, Pipes, and Services into logical groups.

typescript

// app.module.ts - Main/Root Module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [  // Components, Directives, Pipes
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [       // Other modules
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],   // Services
  bootstrap: [AppComponent]  // Root component
})
export class AppModule { }

// feature.module.ts - Feature Module
@NgModule({
  declarations: [
    UserListComponent,
    UserDetailComponent
  ],
  imports: [
    CommonModule,
    SharedModule
  ],
  exports: [UserListComponent]  // Available to other modules
})
export class UserModule { }

You should see

(The application becomes organized into modules and more reusable)