Common Imports

Here's a list of common imports, used in Angular components. 

 NOTE: Usage requires an import statement and adding the module to the Imports block of your component. 

 Common Module 

 Provides core directives like *ngIf , *ngFor , ngClass , ngStyle , etc. 

 Imported as:  

 

 import { CommonModule } from '@angular/common'; 

 

 

 Forms Module 

 If your component uses template-driven forms ( ngModel ), import FormsModule . 

 Imported with this: 

 import { FormsModule } from '@angular/forms'; 

 Reactive Forms Module 

 If using reactive forms ( FormGroup , FormControl ), import ReactiveFormsModule 

 Imported with this: 

 import { ReactiveFormsModule } from '@angular/forms'; 

 Angular Material 

 There are several imports for this, depending on what elements you use. 

 import {MatCardModule} from '@angular/material/card';

import {MatDividerModule} from '@angular/material/divider';

import {MatListModule} from '@angular/material/list';

import {MatIconModule} from '@angular/material/icon'; 

 CDK Drag and Drop 

 Imported with this: 

 

 import {DragDropModule} from '@angular/cdk/drag-drop';