How to integrate Bootstrap material design in Sass based Angular4 application

This is a step by step method to use Material Design with Bootstrap 4 using Sass

follow the below given steps for configuration or https://mdbootstrap.com/angular/5min-quickstart/

Step 1: Create new angular project using Angular CLI command:

ng new your-angular-project --style=scss

Step 2:

cd your-angular-project

Step 3: GitHub npm install

npm i angular-bootstrap-md --save 

Step 4: to app.module.ts add

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({
    imports: [
        MDBBootstrapModule.forRoot()
    ],
    schemas: [ NO_ERRORS_SCHEMA ]
});

Step 5: Make sure that styleExt is set to "scss" in angular-cli.json file, if not change:

"styleExt": "css" to "styleExt": "scss"

Step 6:

Make sure you have . If you have src/styles.css instead, rename it to .scss.

if you want to change styles in existing project you can use ng set defaults.styleExt scss

Step 7: add below lines to angular-cli.json:

"styles": [
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
    "./styles.scss"
],
"scripts": [
  "../node_modules/chart.js/dist/Chart.js",
  "../node_modules/hammerjs/hammer.min.js"
],

Step 8: Update ts.config.json file, add following into tsconfig.json file located in root folder

"include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"], 

Step 9: install external libs

npm install -–save [email protected] font-awesome hammerjs

Step 10: Run server

ng serve --open

for documentation, https://mdbootstrap.com/, after opening this page, go down you'll find like that and click to see documentation