CODEWITHSUNDEEP
htmlangulartypescript
Kron
Kron

Reputation: 483

Mat-slide-toggle looks like normal checkbox

I have a mat-slide-toggle on my angular page. I have the appropriate values imported in the module however the toggle just shows up as a normal checkbox once the page loads.

HTML:

<div style="width:100%;overflow:hidden">
<h5 class="mx-2 mb-0" style="width:50%;float:left;clear:none">Suggested Titles</h5>
<mat-slide-toggle
  style = "float:right;width:30%"
  [color]="color"
  [checked]="checked"
  (change)="andOrBoxChecked()"
  [disabled]="disabled"> {{slideValue}}
</mat-slide-toggle>
</div>

Typescript:

import { Component, OnInit, NgModule } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
[...]
  color = 'accent';
  checked = true;
  disabled = false;
  slideValue = "And";
[...]
  andOrBoxChecked(){
    if(this.slideValue == 'And')
      this.slideValue = 'Or';

    else  
      this.slideValue='And';
  }

Module:

import { MatSlideToggleModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
[...]
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule, //Here
        routing,
        HttpClientModule,
        FormsModule,
        NgSelectModule,
        AlertModule.forRoot(),
        ButtonsModule.forRoot(),
        CollapseModule.forRoot(),
        // BsDatepickerModule.forRoot(),
        ModalModule.forRoot(),
        PaginationModule.forRoot(),
        TooltipModule.forRoot(),
        TypeaheadModule.forRoot(),
        MdcDrawerModule,
        MdcIconModule,
        MdcListModule,
        MatSlideToggleModule, //And here
        NgxChartsModule,
        SharedModule
    ],

My slide toggle Obviously this should resemble a slide toggle and not just a plain checkbox.

Upvotes: 5

Views: 3828

Answers (1)

Sangwin Gawande
Sangwin Gawande

Reputation: 8156

You need to add basic styling sheet provided by Angular Material in your css/scss file.

Please add following line in your styles.css file.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

OR

If you are not using the Angular CLI, you can include a prebuilt theme via a <link> element in your index.html.

Check out Get Started Documentation and follow Step 4: Include a theme section for themes.

Upvotes: 6

Related Questions