The declarations property of an Angular @NgModule lists the components, directives, and pipes that belong to that module. These are its declarable classes. Add a custom class here when its component or directive needs to be used in a template, or when its pipe needs to be registered. section 19.2.2 section 17.3.1
Listing 5.17. The contents of the store.module.ts file in the src/app/store folder
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { ModelModule } from "../model/model.module";
import { StoreComponent } from "./store.component";
@NgModule({
imports: [ModelModule, BrowserModule, FormsModule],
declarations: [StoreComponent],
exports: [StoreComponent]
})
export class StoreModule { }
In the store module, declarations registers StoreComponent. The separate exports entry makes that component available to the root module; imports supplies features from other modules. section 5.4.2
When adding a custom feature, check both its registration and where it will be used:
- Component: import its class into the module, add it to declarations, then place an element matching its selector in a template. For the component used at application startup, bootstrap is a separate setting. section 16.2.1 section 9.6.3
- Directive: add its class to declarations and put a matching selector in the template. Attribute and structural directives are registered the same way. section 14.2.1 section 15.2.2
- Pipe: register the custom pipe in declarations before using it as an application feature. section 17.3.1
Enable a directive in a template
A table row bearing the pa-attr attribute matches the custom directive’s selector. Adding PaAttrDirective alongside ProductComponent in the module’s declarations enables that directive; its DOM changes then affect the repeated rows. section 14.2.1
Declarations is not the same as imports or exports. Import a module to use the declarable classes it provides; built-in classes supplied through BrowserModule do not need to be repeated in the root module’s declarations. In a feature module, declarations enables classes in that module’s templates and prepares classes that exports can expose elsewhere. section 19.2.2 section 19.3.2
The same registration step applies in a component test: a test-only host component is added to the testing module’s declarations so its template can supply a binding to the component under test. section 29.4.6
