ngx-admin with Angular Material

[YathishKris]

Issue type

**I'm submitting a

• [*] bug report
• [ ] feature request
• [ ] question about the decisions made in the repository

Issue description

Current behavior: A simple button in angular material with html <button mat-raised-button>Basic</button>

is rendered as

<button _ngcontent-c23="" mat-raised-button="" class="mat-raised-button"><span class="mat-button-wrapper">Basic</span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button>

Expected behavior: While i tried to integrate angular material with ngx-admin. Style.scss looks like below:

@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);
@include nb-theme-global();

Same html in ngx-admin & Angular material

<button mat-raised-button (click)="goto('configuresettings')">BASIC</button>

above html is rendered as:

<button _ngcontent-c17="" mat-raised-button="">BASUC BTB</button>

I could in the source tab of chrome the angular material theme/styles are download properly.

In ngx-admin template the angular-material style are not loading properly and the output is not as expected as with Angular material. Please guide me if some thing is missed in the styles.scss or any other settings.

Other information:

node -v v8.12.0

npm -v 6.4.1

OS: Windows 10 Browser: Chrome Angular 7.0.3 Nebular 3.0.0

[fosk06]

Hello. I have the same problem. In ngx-admin V2, i had no problem with importing the angular material theme and it was working. In the V3 it's not working anymore.

[aogaki]

Hi, I have the same issue. And I have no idea how to load by a css file.
I added material theme file into styles of angular.json like following (last one)

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/typeface-exo/index.css",
              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
              "node_modules/ionicons/scss/ionicons.scss",
              "node_modules/socicon/css/socicon.css",
              "node_modules/nebular-icons/scss/nebular-icons.scss",
              "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "src/app/@theme/styles/styles.scss",
              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
            ],

It works, but not smart in my opinion.