# 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:

<div id="bkmrk-import-%7B-commonmodul"><div>`import { CommonModule } from '@angular/common';`</div></div><div id="bkmrk-"></div>#### 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.

```typescript
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:

<div id="bkmrk-import-%7Bdragdropmodu"><div>`import {DragDropModule} from '@angular/cdk/drag-drop';`</div></div>