Abril 24 - 28, 2018

Vanessa Aristizabal

Web UI in Globant

@vanessamarely

I am passionate about technology, books, and Anime.

Angular Material CDK

Angular Material CDK

Ng-Heroes

@John_Papa

@DeborahKurata

@sebasgojs

@isdclau

@jairovg

Angular Material CDK

Material Design Components for Angular Apps.

What is Angular Material?

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

CDK: Component Dev Kit

“The Goal of the CDK is to give developers more tools to build awesome components for the web. This will be especially useful for projects that want to take advantage of the features of Angular Material without adopting the Material Design visual language”.

What is CDK?

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

• Generating a project from scratch

Install Node.js® and npm if they are not already on your machine.

Then install the Angular CLI.

npm install -g @angular/cli

Hop into the command line:

ng new material

Once finished:

cd material

 Let's also run and watch our app:

ng serve

How to install Angular Material?

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?