Configure material theme, add material button and input examples

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

@@ -119,5 +119,11 @@
         </nb-actions>
       </nb-card-body>
     </nb-card>
+
+    <nb-card *ngIf="materialThemeActivated">
+      <nb-card-body>
+        <ngx-material-buttons></ngx-material-buttons>
+      </nb-card-body>
+    </nb-card>
   </div>
 </div>

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

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'ngx-buttons',
+  styleUrls: ['./buttons.component.scss'],
+  templateUrl: './buttons.component.html',
+})
+export class ButtonsComponent {
+  public constructor(private readonly themeService: NbThemeService) {}
+
+  private readonly subscription: Subscription = new Subscription();
+
+  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/buttons/material-buttons/material-buttons.component.html

@@ -0,0 +1,6 @@
+<button mat-button color="primary">Basic</button>
+<button mat-raised-button color="primary">Raised</button>
+<button mat-stroked-button color="primary">Stroked</button>
+<button mat-flat-button color="primary">Flat</button>
+<button mat-fab color="primary">FAB</button>
+<button mat-mini-fab color="primary">mini</button>

src/app/pages/forms/buttons/material-buttons/material-buttons.component.scss

@@ -0,0 +1,3 @@
+button {
+  margin: 0.5rem;
+}

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-material-buttons',
+  templateUrl: './material-buttons.component.html',
+  styleUrls: ['./material-buttons.component.scss']
+})
+export class MaterialButtonsComponent {}