Add material menu icon for material themes

src/app/@theme/components/header/header.component.html

@@ -8,7 +8,7 @@
       [matRippleCentered]="true"
       (click)="toggleSidebar()"
     >
-      <nb-icon icon="menu-2-outline"></nb-icon>
+      <nb-icon [icon]="(materialTheme$ | async) ? 'menu-outline' : 'menu-2-outline'"></nb-icon>
     </a>
     <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
   </div>

src/app/@theme/components/header/header.component.ts

@@ -4,7 +4,7 @@ import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeServ
 import { UserData } from '../../../@core/data/users';
 import { LayoutService } from '../../../@core/utils';
 import { map, takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { Subject, Observable } from 'rxjs';
 import { RippleService } from '../../../@core/utils/ripple.service';
 
 @Component({
@@ -15,6 +15,7 @@ import { RippleService } from '../../../@core/utils/ripple.service';
 export class HeaderComponent implements OnInit, OnDestroy {
 
   private destroy$: Subject<void> = new Subject<void>();
+  public readonly materialTheme$: Observable<boolean>;
   userPictureOnly: boolean = false;
   user: any;
 
@@ -49,13 +50,20 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
   userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
 
-  constructor(private sidebarService: NbSidebarService,
+  public constructor(
-              private menuService: NbMenuService,
+    private sidebarService: NbSidebarService,
-              private themeService: NbThemeService,
+    private menuService: NbMenuService,
-              private userService: UserData,
+    private themeService: NbThemeService,
-              private layoutService: LayoutService,
+    private userService: UserData,
-              private breakpointService: NbMediaBreakpointsService,
+    private layoutService: LayoutService,
-              private rippleService: RippleService) {
+    private breakpointService: NbMediaBreakpointsService,
+    private rippleService: RippleService,
+  ) {
+    this.materialTheme$ = this.themeService.onThemeChange()
+      .pipe(map(theme => {
+        const themeName: string = theme?.name || '';
+        return themeName.startsWith('material');
+      }));
   }
 
   ngOnInit() {

src/app/pages/forms/buttons/buttons.component.html

@@ -120,7 +120,7 @@
       </nb-card-body>
     </nb-card>
 
-    <nb-card *ngIf="materialThemeActivated">
+    <nb-card *ngIf="materialTheme$ | async">
       <nb-card-body>
         <ngx-material-buttons></ngx-material-buttons>
       </nb-card-body>

src/app/pages/forms/buttons/buttons.component.ts

@@ -1,30 +1,26 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component } from '@angular/core';
 import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme';
-import { Subscription } from 'rxjs';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'ngx-buttons',
   styleUrls: ['./buttons.component.scss'],
   templateUrl: './buttons.component.html',
 })
-export class ButtonsComponent implements OnInit, OnDestroy {
+export class ButtonsComponent {
-  public constructor(private readonly themeService: NbThemeService) {}
+  public constructor(private readonly themeService: NbThemeService) {
+    this.materialTheme$ = this.themeService.onThemeChange()
+      .pipe(map(theme => {
+        const themeName: string = theme?.name || '';
+        return themeName.startsWith('material');
+      }));
+  }
 
-  private readonly subscription: Subscription = new Subscription();
+  public readonly materialTheme$: Observable<boolean>;
 
   public readonly statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
   public readonly shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
   public readonly sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
-  public materialThemeActivated: boolean = false;
 
-  public ngOnInit(): void {
-    this.subscription.add(this.themeService.onThemeChange().subscribe(theme => {
-      const themeName: string = theme?.name || '';
-      this.materialThemeActivated = themeName.startsWith('material');
-    }));
-  }
-
-  public ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
 }

src/app/pages/forms/form-inputs/form-inputs.component.html

@@ -85,7 +85,7 @@
     </nb-card>
   </div>
 </div>
-<div *ngIf="materialThemeActivated" class="row">
+<div *ngIf="materialTheme$ | async" class="row">
   <div class="col-lg-12">
     <ngx-material-inputs></ngx-material-inputs>
   </div>

src/app/pages/forms/form-inputs/form-inputs.component.ts

@@ -1,30 +1,25 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
-import { Subscription } from 'rxjs';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'ngx-form-inputs',
   styleUrls: ['./form-inputs.component.scss'],
   templateUrl: './form-inputs.component.html',
 })
-export class FormInputsComponent implements OnInit, OnDestroy {
+export class FormInputsComponent {
-  public constructor(private readonly themeService: NbThemeService) {}
+  public constructor(private readonly themeService: NbThemeService) {
+    this.materialTheme$ = this.themeService.onThemeChange()
+      .pipe(map(theme => {
+        const themeName: string = theme?.name || '';
+        return themeName.startsWith('material');
+      }));
+  }
 
-  private readonly subscription: Subscription = new Subscription();
+  public readonly materialTheme$: Observable<boolean>;
 
-  public materialThemeActivated: boolean = false;
   public starRate: number = 2;
   public heartRate: number = 4;
   public radioGroupValue: string = 'This is value 2';
-
-  public ngOnInit(): void {
-    this.subscription.add(this.themeService.onThemeChange().subscribe(theme => {
-      const themeName: string = theme?.name || '';
-      this.materialThemeActivated = themeName.startsWith('material');
-    }));
-  }
-
-  public ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
 }