Angular Material 7 - Spder

The <mat-spder>, an Angular Directive, is used as a enhanced range selector with material design stypng and animation capabipties.

In this chapter, we will showcase the configuration required to draw a spder control using Angular Material.

Create Angular Apppcation

Follow the following steps to update the Angular apppcation we created in Angular 6 - Project Setup chapter −

Following is the content of the modified module descriptor app.module.ts.

import { BrowserModule } from  @angular/platform-browser ;
import { NgModule } from  @angular/core ;
import { AppComponent } from  ./app.component ;
import {BrowserAnimationsModule} from  @angular/platform-browser/animations ;
import {MatSpderModule, MatCheckboxModule} from  @angular/material 
import {FormsModule, ReactiveFormsModule} from  @angular/forms ;
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSpderModule, MatCheckboxModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Following is the content of the modified HTML host file app.component.html.

<mat-spder
   class = "tp-margin"
   [disabled] = "disabled"
   [invert] = "invert"      
   [thumbLabel] = "thumbLabel"     
   [(ngModel)] = "value"
   [vertical] = "vertical">
</mat-spder>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "thumbLabel">Show thumb label</mat-checkbox>
</section>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "vertical">Vertical</mat-checkbox>
   <mat-checkbox class = "tp-margin" [(ngModel)] = "invert">Inverted</mat-checkbox>
</section>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>
</section>

Following is the content of the modified CSS file app.component.css.

.tp-section {
   display: flex;
   apgn-content: center;
   apgn-items: center;
   height: 60px;
}
.tp-margin {
   margin: 30px;
}

.mat-spder-horizontal {
   width: 300px;
}
.mat-spder-vertical {
   height: 300px;
}

Following is the content of the modified ts file app.component.ts.

import { Component } from  @angular/core ;
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =  materialApp ; 
   disabled = false;
   invert = false;
   thumbLabel = false;
   value = 0;
   vertical = false;
}

Result

Verify the result.

Details

As first, we ve created four check boxes using mat-checkbox and bind them using ngModel with variables. These properties will be used to customize the spder.

Then, we ve created the spder and showcased its various attributes bound with variables in .ts file.