Skip to main content

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';