angular - mat-slide-toggle is not visible

Question

problem

mat-slide-toggle is not visible.

I\'m trying to implement this example from below url https://material.angular.io/compon

Answer 1

In your module definition you forgot to add MatSlideToggleModule (you are importing the file but your app doesn't use it) in the imports section and you need BrowserAnimationsModule:

@NgModule({
declarations: [
    AppComponent,
    HeroDetailComponent,
    HeroesComponent,
    DashboardComponent,
    HeroSearchComponent,
    MaterialDashboardComponent,
    UserComponent,
    LoginComponent,
    AlertComponent,
    RegisterComponent,
    HomeComponent,
    ApiDashboardComponent,
    ApiDashboardformComponent,
    EditApiDashboardComponent,
    MaterialThemeComponent,
    LoginFosUserandRestBundleComponent,
    LoginuserbundleComponent,
    MaterialTestthemeComponent

    //MenuIconsExample
    //AppRoutingModule
],

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterTestingModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService, { passThruUnknownUrl: true }), // fake in memory API simulation
    // InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule,
    MatSidenavModule,
    MatInputModule,
    MatMenuModule,
    BrowserAnimationsModule,
    MatTableModule,
    CdkTableModule,
    DataTablesModule,
    //MaterialModule,
    ReactiveFormsModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatSlideToggleModule, // here otherwise it's not possible to use the component mat-slide-toggle defined in this module
    BrowserAnimationsModule
],
//exports: [MatSidenavModule,MatInputModule,MatMenuModule],
exports: [
    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    //MatCoreModule,
    MatDatepickerModule,
    MatDialogModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
//declare your service  here 
providers: [HeroService, UserService, AlertService, AuthGuard,

    AuthenticationService,
    UserService,
    ApiDashboard,
    ApiDashboardDataService,
    FormService,
    UserRegistrationService,
    FormBuilder,

    // providers used to create fake backend
    //  fakeBackendProvider,
    MockBackend,
    BaseRequestOptions],
bootstrap: [AppComponent]
})
export class AppModule { }

You didn't see any error because you use

schemas: [CUSTOM_ELEMENTS_SCHEMA]

You didn't provide your css but you will also need to import a material theme in your style.(s)css like:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

You can find a simple example here https://stackblitz.com/edit/angular-eszrpl