Angular Material Starter with Ng-Bootstrap support

6 min readJan 6, 2019

Angular is one of the most popular frontend JS frameworks available nowadays. It Provides features such as :

DEVELOPMENT ACROSS ALL PLATFORMS
SPEED & PERFORMANCE
INCREDIBLE TOOLING for most browser tasks

With Angular Material, the features of Angular are even more extended in order to support the material standards. It provides in-house support for the snack bar, bottom sheet, multi-step forms, Drag & Drop, etc.

No doubt this is enough for most of the small to moderate implementations but sometimes we need some extra features that are supported by bootstrap. From there Ng-Bootstrap comes into the picture. It provides a wrapper for all the bootstrap functions and even some more purely in angular without the need to include JQuery.

Getting Started with a New Angular Project:

Firstly, run the following command to start an empty angular project

Angular start command

ng new starter --interactive

Replace “starter” with the name for your app.

Select in the following questions whether you want to enable routing or not.

Angular routing interactive option

Select the type of CSS you would like to use

After selecting wait for downloading and installing of angular starter template and npm modules.

This would give you a starting point for your app.

Installing Angular Material

Go into your project directory and run the following command to add Angular Material into your app

ng add @angular/material

In order for angular material to work, you could either include a predefined theme in your style.scss file or create a custom theme. I myself prefer the later as it provides us with more granular control over our application but if you are a fan of keeping things simple you could go for a predefined theme too (though I will still cover creating and using the predefined theme in this blog).

Creating a Custom Material Theme:

Firstly, add a file named variables.scss in themes folder in your src folder to store the app-wide SCSS theming variables. In that file add the following:

// File: '/src/themes/variables.scss'//for allowing the material select and other popups to come over bootstrap and other modals
$root-z-index-of-modal: 1030;$cdk-z-index-overlay-container: $root-z-index-of-modal+1;
$cdk-z-index-overlay: $root-z-index-of-modal+1;
$cdk-z-index-overlay-backdrop: $root-z-index-of-modal+1;

Then add Custom Material Style Theme to a file named custom_material_theme.scss and save it under themes folder in your src folder

// File: '/src/themes/custom_material_theme.scss'@import '~@angular/material/theming';@import './variables.scss';@include mat-core();$candy-app-primary: mat-palette(<!--theme color name eg. $mat-light-green--!>, 700, A100, A700);
$candy-app-accent:  mat-palette(<!--theme color name eg. $mat-teal--!>, A200, A100, A400);$candy-app-warn:    mat-palette(<!--theme color name eg. $mat-red--!>);$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);@include angular-material-theme($candy-app-theme);//Add custom material theme scss here

Replace all <! — theme color name eg. $mat-light-green — !> tags in the above code by the actual theme colors. You can also add extra SCSS styles for modifying the default look and feel of material components in this file.

Finally add custom_material_theme.scss in your angular.json under styles.

//File: '/angular.json'{ 
  .....
  "projects": { 
      .....     
      "architect": {
        "build": {  
            .....
            "styles": [
              "src/styles.scss",
              "src/themes/custom_material_theme.scss",
            ],
            .....
         }
         .....
      }
      .....
   }
   .....
}

Installing Bootstrap

Go into your project directory and run the following command to install bootstrap.

npm install bootstrap

In order to update the theme color of bootstrap to that of your brand add the following to your variables.scss.

// File: '/src/themes/variables.scss'.....//color name for brands primary color$primary: #609d43;//font family to be used for your website$font-family-sans-serif: 'Montserrat', sans-serif;.....

Secondly add Bootstrap Custom style theme to a file named custom_bootstrap.scss and save it under themes folder in your src folder.

//File: '/src/themes/custom_bootstrap.scss'@import './variables.scss';@import "~bootstrap/scss/bootstrap.scss";//Add custom bootstrap styling scss here

You can also add extra SCSS styles for modifying the default look and feel of bootstrap components in this file.

Finally, add custom_bootstrap.scss in your angular.json under styles.

//File: '/angular.json'{ 
  .....
  "projects": { 
      .....     
      "architect": {
        "build": {  
            .....
            "styles": [
              "src/styles.scss",
              "src/themes/custom_material_theme.scss",
              "src/themes/custom_bootstrap.scss",
            ],
            .....
         }
         .....
      }
      .....
   }
   .....
}

Installing Ng-Bootstrap

Go into your project directory and run the following command to install ng-bootstrap in your project.

npm install --save @ng-bootstrap/ng-bootstrap

This would install ng-bootstrap to your project but in order to use it, you would have to import it into your project. For that, you could either import that directly into your app.module.ts or you could import it into a core module for importing of all such modules. I personally prefer the core module way as it keeps your app.module.ts relatively clean. But if you prefer one place for everything kind of solution then you could import it directly there.

Core Module for Importing Modules:

Add a file named core.module.ts to a folder named core in your app folder and the following to it

// File: '/src/app/core/core.module.ts'import { NgModule, ModuleWithProviders } from '@angular/core';import { NgbModule } from '@ng-bootstrap/ng-bootstrap';import { environment } from '../../environments/environment';@NgModule({
  imports: [
    NgbModule.forRoot(),
    // module that are a core part of your app such as appollo-angular, angularfire modules, etc  
  ],
  providers: [],
  exports:[
    NgbModule
  ]
})
export class CoreModule {
  static forRoot(): ModuleWithProviders{
    return{
      ngModule:CoreModule,
    };
  }
  static forChild(): ModuleWithProviders{
    return{
      ngModule:CoreModule,
      providers:[
      ]
    };
  }
}

This would create a central place from where you can import all your dependent modules such as ng-bootstrap, apollo-angular, angular fire modules, etc

(Optional) Core Features Module:

Sometimes we require a module for importing features or creating components, pipes, directives, etc that have to be shared between two or different modules. For such purposes, the core-features module comes into play. This allows you to define modules, components, pipes, directives, etc that have to be shared within different modules. By defining them in this file and exporting them you allow the access to all those features in the modules that import this module. This particularly helps in the case of angular material as you can import its different modules in this file and get access to its features in all files that import this module without the need to import them again.

So for that create a file named core-features.module.ts and it to a folder named core-features in your app folder and then add the following to it:

//File: '/src/app/core-features/core-features.module.ts'import { NgModule, ModuleWithProviders, Provider } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
// import features modules in this module that you require to style your app or to increase its functionality
// you can also add directives and pipes that your require throughout your app in this module and export them from here
//this is the default file for including the material modules such as MatSnackBarModule, MatDialogModule
@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
  ],
  declarations: [ ],
  exports:[
    ReactiveFormsModule,
    FormsModule,
  ],
  entryComponents:[ ]
})
export class CoreFeaturesModule {
  static forRoot(): ModuleWithProviders{
    return{
      ngModule:CoreFeaturesModule,
      providers: [ ]
    };
  }
  static forChild(): ModuleWithProviders{
    return{
      ngModule:CoreFeaturesModule,
      providers:[ ]
    };
  }
}

This would provide the access for all the modules imported and exported in this file into its importing modules.

Finally, refer these files in your app.module.ts

// File: '/src/app/app.module.ts'import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { CoreModule } from './core/core.module';
import { CoreFeaturesModule } from "./core-features/core-features.module";@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    CoreModule.forRoot(),
    CoreFeaturesModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }