Organizing the application with Angular modules

The basis for organizing the components of an application using the framework is the Angular modules, more recognized in the documentation and the community by the name NgModules.

An Angular module is a TypeScript class marked with the @NgModule decorator that contains metadata, as in this example:

import { NgModule } from '@angular/core';
@NgModule({
 declarations: [SimulationComponent],
 providers:[],
 imports: [
   CommonModule,
   SharedModule,
   MatCardModule,
   MatButtonModule,
   MatSelectModule,
   MatRadioModule,ReactiveFormsModule,
 ],
 exports: [SimulationComponent],
})
export class SimulationModule {}

Let’s detail each of these types of metadata in the following subsections.

declarations

This metadata contains an array of components, directives, and pipes that make up the module. These components must...