Configure material theme, add material button and input examples

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

@@ -85,3 +85,8 @@
     </nb-card>
   </div>
 </div>
+<div *ngIf="materialThemeActivated" class="row">
+  <div class="col-lg-12">
+    <ngx-material-inputs></ngx-material-inputs>
+  </div>
+</div>

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

@@ -1,13 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'ngx-form-inputs',
   styleUrls: ['./form-inputs.component.scss'],
   templateUrl: './form-inputs.component.html',
 })
-export class FormInputsComponent {
+export class FormInputsComponent implements OnInit, OnDestroy {
+  public constructor(private readonly themeService: NbThemeService) {}
 
-  starRate = 2;
-  heartRate = 4;
-  radioGroupValue = 'This is value 2';
+  private readonly subscription: Subscription = new Subscription();
+
+  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();
+  }
 }

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

@@ -0,0 +1,58 @@
+<nb-card>
+  <nb-card-header>Angular Material</nb-card-header>
+  <nb-card-body>
+    <div class="row">
+      <div class="col-lg-6">
+        <mat-form-field class="input-example">
+          <mat-label>Input</mat-label>
+          <input matInput autocomplete="off">
+          <mat-hint>hint</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field class="input-example">
+          <mat-label>Select</mat-label>
+          <mat-select>
+            <mat-option value="1">Option 1</mat-option>
+            <mat-option value="2">Option 2</mat-option>
+            <mat-option value="3">Option 3</mat-option>
+          </mat-select>
+          <mat-hint>hint</mat-hint>
+        </mat-form-field>
+    
+        <mat-form-field class="input-example">
+          <mat-label>Datepicker</mat-label>
+          <input matInput autocomplete="off" [matDatepicker]="picker">
+          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-datepicker #picker></mat-datepicker>
+          <mat-hint>hint</mat-hint>
+        </mat-form-field>
+      </div>
+      <div class="col-lg-6">
+        <mat-form-field class="input-example">
+          <mat-label>Textarea</mat-label>
+          <textarea matInput autocomplete="off"></textarea>
+          <mat-hint>hint</mat-hint>
+        </mat-form-field>
+
+        <div class="input-example">
+          <label>Checkbox</label>
+          <mat-checkbox color="primary" [checked]="true"></mat-checkbox>
+        </div>
+    
+        <div class="input-example">
+          <label>Toggle</label>
+          <mat-slide-toggle color="primary" [checked]="true"></mat-slide-toggle>
+        </div>
+    
+        <div class="input-example">
+          <label>Radio</label>
+          <mat-radio-group color="primary">
+            <mat-radio-button value="1" [checked]="true">Option 1</mat-radio-button>
+            <mat-radio-button value="2">Option 2</mat-radio-button>
+            <mat-radio-button value="3">Option 3</mat-radio-button>
+          </mat-radio-group>
+        </div>
+      </div>
+    </div>
+  </nb-card-body>
+</nb-card>

src/app/pages/forms/form-inputs/material-inputs/material-inputs.component.scss

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+}
+
+.input-example {
+  display: block;
+  margin-top: 1rem;
+
+  label, mat-radio-button {
+    margin-right: 1rem;
+  }
+
+  textarea {
+    min-height: 3rem;
+  }
+}

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

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