How to Use Declarations in Angular Module: Simple Guide

In Angular, use the declarations array inside an @NgModule to list all components, directives, and pipes that belong to that module. This tells Angular which classes it should recognize and compile when rendering templates.

Syntax

The declarations array is part of the @NgModule decorator. It lists components, directives, and pipes that belong to the module. Angular uses this list to know what it can use in the module's templates.

Each item in declarations must be a class that is a component, directive, or pipe.

typescript

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my-component.component';
import { MyDirective } from './my-directive.directive';
import { MyPipe } from './my-pipe.pipe';

@NgModule({
  declarations: [
    MyComponent,
    MyDirective,
    MyPipe
  ],
  imports: [CommonModule],
  exports: [MyComponent]
})
export class MyModule { }

Example

This example shows a simple Angular module declaring a component, a directive, and a pipe. The component uses the directive and pipe in its template. Declaring them in the module makes Angular recognize and compile them properly.

typescript

import { NgModule, Component, Directive, Pipe, PipeTransform, ElementRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@Directive({
  selector: '[appHighlight]'
})
class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

@Pipe({
  name: 'exclaim'
})
class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + '!!!';
  }
}

@Component({
  selector: 'app-root',
  template: `<h1 appHighlight>{{ 'Hello Angular' | exclaim }}</h1>`
})
class AppComponent { }

@NgModule({
  declarations: [AppComponent, HighlightDirective, ExclaimPipe],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Output

A webpage showing a yellow highlighted heading with text: "Hello Angular!!!"

Common Pitfalls

Common mistakes when using declarations include:

• Forgetting to declare a component, directive, or pipe in any module, causing Angular to throw errors like "component is not a known element".
• Declaring the same class in more than one module, which Angular does not allow.
• Trying to declare services or modules inside declarations instead of providers or imports.

typescript

/* Wrong: Declaring a service in declarations */
@NgModule({
  declarations: [MyService], // ❌ Services should NOT be here
  imports: [],
  providers: []
})
export class WrongModule { }

/* Right: Declare components/directives/pipes only */
@NgModule({
  declarations: [MyComponent, MyDirective, MyPipe], // ✅ Correct
  providers: [MyService]
})
export class CorrectModule { }

Quick Reference

• declarations: List components, directives, pipes belonging to this module.
• imports: List other modules whose exported classes are needed.
• providers: List services available in this module.
• exports: List components/directives/pipes to share with other modules.

Key Takeaways

Always list components, directives, and pipes in the module's declarations array.

Do not declare services or modules inside declarations; use providers and imports instead.

Each declared class must belong to exactly one module to avoid errors.

Declarations make Angular aware of what it can use in templates within that module.

Use exports to share declared classes with other modules.