Angular Material CDK

Material Design is the visual language Google created to synchronize web design efforts and make sites scalable across all major platforms and devices.

What is Material Design?

Design as “The art of considered creation.”

Angular Material CDK

• Form Controls
• Navigation
• Layout
• Buttons & Indicators
• Popups & Modals
• Data Table

Components

Angular Material CDK

• Form Controls

Components

Angular Material CDK

• Navigation

Components

Angular Material CDK

• Layout

Components

Angular Material CDK

• Buttons & Indicators

Components

Angular Material CDK

• Popups & Modals

Components

Angular Material CDK

• Data Table

Components

Angular Material CDK

Angular Material CDK

• Not everyone wants the Material Design aesthetic.

​

• Every product has its own brand

Why @angular/cdk?

Angular Material CDK

UI Components

Angular Material CDK

Utilities to make components more accessible for screen-readers users

What's in it?

Ay11

Accessibility

Common pattern for retrieving LTR/RTL direction

Bidi

Bidirectionality

Angular Material CDK

Helpers for building responsive or adapted interfaces

What's in it?

Layout

Service for creating and managing all kinds of floating panel.

Overlay

Angular Material CDK

What's in it?

System for dynamically creating components and views

Portal

Helpers for directives that react to scroll events.

Scrolling

Angular Material CDK

What's in it?

Platform

Base table component decoupled from all styles

Table

Platform

Stepper

A stepper is a wizard-like workflow that divides content into logical steps

Angular Material CDK

What's in it?

Angular Material CDK

How to install Angular Material?

Angular Material CDK

Installing Dependencies

npm i --save @angular/cdk @angular/material @angular/animations hammerjs

Open our the /src/app/app.module.ts file and import the packages that we just installed:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatToolbarModule, MatInputModule, MatIconModule, MatTableModule } from '@angular/material';

Now, let's add each of these as imports in the @NgModule:

How to install Angular Material?

Angular Material CDK

@NgModule({
  imports: [...
    BrowserAnimationsModule,MatButtonModule, MatToolbarModule, ...
   ...],
})

Go ahead and save this file.

How did I know the names of the modules to import?

angular material documentation 

How to install Angular Material?

Angular Material CDK

If you click on any of the components on the left menu, and then click on the API  tab, it provides you with the exact import line that you need to use.

In OVERVIEW tab you can find some html examples to added in your project.

How to install Angular Material?

Angular Material CDK

How to install Angular Material?