How to integrate angular material in jhispter 7.6.0 monolothique application

user_17725220 0
Viewed 88

Hi everyone a have a application using jhipster 7.6.0 and i want to install angular material.

This is the error I get when I run ng add @angular/material

enter image description here

I can not install material design problem on the screen capture below

enter image description here

I think I have the same error with the angular material installation

jhipster angular
1 Answers

You can use Material Design for Bootstrap 5 & Angular 13. Here's how:

  1. Install The MDB Angular UI KIT: npm i mdb-angular-ui-kit

  2. Add the following to import MDB stylesheet in src/main/webapp/content/scss/vendor.scss:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
  1. Add https://fonts.googleapis.com and https://fonts.gstatic.com to the style-src and font-src content security policy rules in src/main/resources/config/application.yml.
jhipster:
  ...
  security:
    content-security-policy: "... style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; ... font-src 'self' data: https://fonts.gstatic.com"
  1. Remove the following styles from global.scss:
/* Error highlight on input fields */
.ng-valid[required],
.ng-valid.required {
  border-left: 5px solid green;
}
.ng-invalid:not(form) {
  border-left: 5px solid red;
}
  1. Modify the .dropdown-menu rule to set the display to none.
.dropdown-menu {
  padding-left: 0;
  display: none;
}

Below is a screenshot taken after these changes.

screenshot

user_656810
Related