CODEWITHSUNDEEP
material-designangular5
Antonio
Antonio

Reputation: 654

migrating to material design with angular5

I am developing an angular4 app with bootstrap. I just moved to angular5 and I wonder if is not the case to use material design for components instead of prime-ng ng-bootrap kendo-ui etc... Thanks

Upvotes: 0

Views: 363

Answers (1)

karlmnz
karlmnz

Reputation: 138

In console:

ng new pjt
cd pjt

npm install @angular/material @angular/cdk --save
npm install @angular/animations --save

Create app/modules/material.module.ts file and include:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material';

@NgModule({
imports: [MatButtonModule],
exports: [MatButtonModule],
})

export class MaterialModule { }

Note each element Mat...Module you want to use needs to be added in the above file comma separated to the import, imports and exports lines.

update app/app.modules.ts to include

import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MaterialModule } from './modules/material.module';
...
imports: [
...
BrowserAnimationsModule,
MaterialModule
],

update styles.scss to include

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

In console

npm install hammerjs --save

update main.ts to include

import 'hammerjs';

update index.html to include

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

In console

ng serve

Then you can start including in your components the material elements, e.g. <button mat-button>Some Btn<button> ... check out material.angular.io for elements ...

then check out https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App for more details.

Upvotes: 1

Related Questions