7

I'm trying to use <mat-slide-toggle>Click me!</mat-slide-toggle>inside a component which already has MatSlideToggleModule imported, but I'm still getting the message that it's not a known element.

Angular version: 8.0.1

HTML Page (slide-page.html)

<div class="grid-slide-toggle-material"> 
  <mat-slide-toggle>Click me!</mat-slide-toggle>
</div>

Module (slide-page.module.ts)

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { CommonModule } from '@angular/common';
import { MaterialModule } from 'projects/authenticator/src/shared/modules/material.module';
import { BasicModule } from 'src/app/shared/modules/basic/basic.module';
import { MatButtonToggleModule, MatButtonToggleGroup } from '@angular/material';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
    MaterialModule,
    ReactiveFormsModule,
    CommonModule,
    FormsModule,
    MatButtonToggleModule,
    MatSlideToggleModule 
  ]
})
export class SlidePageModule { }

How is it possible that the html is not being recognized even after the imports in the item's module?

2
  • I got this error and then I noticed that my component was somehow declared in app.module although it was supposed to be in sub-module called admin. No idea how it got there. Fixing the declarations solved the issue
    – O-9
    Apr 6, 2022 at 7:32
  • consider selecting accepted answer @MattDAVM Dec 14, 2022 at 10:46

2 Answers 2

13

As Daniel suggested, you need to add MatSlideToggleModule to your missing export in @NgModule.

But, please mind to write MatSlideToggleModule instead of MatSlideToogleModule.

In app.moudle.ts, add:

`import { MatSlideToggleModule } from '@angular/material/slide-toggle'`

inside @NgModule, imports, add:

MatSlideToggleModule 
2

try to add MatSlideToogleModule to your missing export in @NgModule.

Adding one more idea. Where do you have declared a component? Assume that your component is calling slidePageComponent.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { CommonModule } from '@angular/common';
import { MaterialModule } from 'projects/authenticator/src/shared/modules/material.module';
import { BasicModule } from 'src/app/shared/modules/basic/basic.module';
import { MatButtonToggleModule, MatButtonToggleGroup } from '@angular/material';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { SlidePageComponent } from './component/slide-page.component'

@NgModule({
  declarations: [
  SlidePageComponent
],
  imports: [
    MaterialModule,
    ReactiveFormsModule,
    CommonModule,
    FormsModule,
    MatButtonToggleModule,
    MatSlideToggleModule 
  ],
exports: [
    MatSlideToggleModule 
]
})
export class SlidePageModule { }
2
  • 1
    Tried it out, still receiving "is not a known element"
    – MattDAVM
    Mar 10, 2020 at 15:04
  • 1
    I edit my example. Look for declarations - you missing in declaration import of your slide-page-component.ts Its just example your file path can be different. Let me know if this helps you. Mar 11, 2020 at 0:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.