Integrating Google Material Theme in Jhipster

Hi, everyone i am going to share one of my experiences where i need to integrate Material in our jhipster project. So i searched and find about official google material for Angular here. So i am gonna share how you can integrate.

Angular Material Link

There is also one MD-bootstrap you can integrate, but some things need to be fixed after integration. As it supports angular, but not jhipster now. Still you can check below link for MD-Bootstrap, of my previous post:

Steps For Integrating MD Bootstrap In Jhipster Project

So let us start with angular material.

Step 1: Install Angular Material, Angular CDK and Angular Animations

Open terminal and enter command depending on your package manager

for Npm

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

for Yarn

yarn add @angular/material @angular/cdk @angular/animations

Step 2: Configure animations

Once the animations package is installed, import BrowserAnimationsModule into your application to enable animations support.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

Step 3: Import the component modules

Import the NgModule for each component you want to use:

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

Alternatively, you can create a separate NgModule that imports all of the Angular Material components that you will use in your application. You can then include this module wherever you’d like to use the components.

import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MatButtonModule, MatCheckboxModule],
  exports: [MatButtonModule, MatCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

if you want to use few components , use directly in related module . If required to use at multiple places, create a single module and import it.

Step 4: Include a theme

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include one of Angular Material’s prebuilt themes globally in your application. If you’re using the Angular CLI, you can add this to your styles.css or styles.scss:

For jhipster, we add it to vendor.scss located in ‘src/main/webapp/app/content/vendor.scss’

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

You can include a theme file directly into your application from @angular/material/prebuilt-themes

Available pre-built themes:

• deeppurple-amber.css
• indigo-pink.css
• pink-bluegrey.css
• purple-green.css

Step 5: Gesture Support

Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.

You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.

To install via npm, use the following command:

NPM

npm install --save hammerjs

Yarn

yarn add hammerjs

After installing, import it on your app’s entry point (e.g. src/main.ts).

import 'hammerjs';

for Jhipster do import in main.ts file where we declare routing and app directives. The default path to main.ts is ‘src/main/webapp/app/main.ts’

Step 6 (Optional): Add Material Icons

If you want to use the mat-icon component with the official Material Design Icons, load the icon font in your index.html.

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

Demo code

home.module.ts

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [ MatButtonModule, MatIconModule ] ,
declarations: [HomeComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

home.component.html

<div class="container">
<h3>Basic Buttons</h3>
<div class="example-button-row">
<button mat-button>Basic</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>
<button mat-button disabled>Disabled</button>
<a mat-button routerLink=".">Link</a>
</div>
<h3>Raised Buttons</h3>
<div class="example-button-row">
<button mat-raised-button>Basic</button>
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>
<a mat-raised-button routerLink=".">Link</a>
</div>
<h3>Stroked Buttons</h3>
<div class="example-button-row">
<button mat-stroked-button>Basic</button>
<button mat-stroked-button color="primary">Primary</button>
<button mat-stroked-button color="accent">Accent</button>
<button mat-stroked-button color="warn">Warn</button>
<button mat-stroked-button disabled>Disabled</button>
<a mat-stroked-button routerLink=".">Link</a>
</div>
<h3>Flat Buttons</h3>
<div class="example-button-row">
<button mat-flat-button>Basic</button>
<button mat-flat-button color="primary">Primary</button>
<button mat-flat-button color="accent">Accent</button>
<button mat-flat-button color="warn">Warn</button>
<button mat-flat-button disabled>Disabled</button>
<a mat-flat-button routerLink=".">Link</a>
</div>
<h3>Icon Buttons</h3>
<div class="example-button-row">
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button color="primary">
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button color="accent">
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button color="warn">
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button disabled>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
</div>
<h3>Fab Buttons</h3>
<div class="example-button-row">
<button mat-fab>Basic</button>
<button mat-fab color="primary">Primary</button>
<button mat-fab color="accent">Accent</button>
<button mat-fab color="warn">Warn</button>
<button mat-fab disabled>Disabled</button>
<button mat-fab>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<a mat-fab routerLink=".">Link</a>
</div>
<h3>Mini Fab Buttons</h3>
<div class="example-button-row">
<button mat-mini-fab>Basic</button>
<button mat-mini-fab color="primary">Primary</button>
<button mat-mini-fab color="accent">Accent</button>
<button mat-mini-fab color="warn">Warn</button>
<button mat-mini-fab disabled>Disabled</button>
<button mat-mini-fab>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<a mat-mini-fab routerLink=".">Link</a>
</div>
</div>

Output

So , what we have done is , we imported module and html directives for the sample code above.

So steps are:

1. Import module you require to use like { MatButtonModule }
2. Add related directive(angular tag) for the component.
3. By default we have color classes, which you can use. :

• primary
• accent
• warn

So this, way you can import other modules to use components .

Other components you can check from here below:

Angular Material Components Guide Link

Bonus

You can also define and create your custom theme by following the style guide here :

Angular Material Theming Guide Link

So hope you like the post, then show how much you like by doing clap for me, as it inspires me to write more post.

Also check out my personal blog for other technical programming posts here :

5 best apps for Android privacy