Material Design for Bootstrap 4 provides an Angular Bootstrap UI KIT. It’s built with Angular 6, Bootstrap 4 and TypeScript and can immediately transform the look and fell of your application. Let’s add its features to an Angular project.
- Angular CLI – a command line interface tool that generates a project as well as performs many development tasks.
Create a new branch
We want to keep features in our project separated and merge them to the
develop branch only when they are completely finished. Create a new branch in your repository:
Make sure your Angular project supports Sass
If you rely on the default Angular settings, all projects generated with the CLI depend on
.css files. MDB requires
.scss support but no matter if you’re creating a fresh app or you have already generated a project – you can modify its CSS preprocessor easily. Check out the How to change a CSS preprocessor in Angular post to adjust the project.
Install the theme and its dependencies
After you had adjusted your Angular project to sass, you can go to the project’s main directory and download the theme with npm:
Install the required, according to the MDB docs, dependencies: email@example.com, @types/chart.js, font-awesome, hammerjs, angular5-csv:
Update imports in app.module.ts
You’ve just added a new library, so you need to make it available through the app by importing it into AppModule.
- Import MDBBootstrapModule
Then add it to the @NgModule metadata’s imports array where a list of the modules required by your app is stored:
- Import NO_ERRORS_SCHEMA that allows using any property on any element:
Now, you can make elements and properties that are neither Angular components nor directives allowed in the NgModule – declare in the schemas:
The file should contain the following code:
Confirm that the theme has been applied correctly
Launch the server:
Thanks to the
--open option the app is automatically started in your browser on
http://localhost:4200/. Angular watches the app’s files and repeatedly rebuild the project in case of any changes detected.
Even on a freshly created app, you can notice new styles:
Commit the changes
You can ascertain the files affected by applying the theme and commit the changes:
Photo by Filip Mroz on StockSnap