migrating to material design with angular5 - material-design

Question

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

Answer 1

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.