Angular Material SlideToggle Not Sliding

Question

I have an Angular component ("new-form"), which has a slide toggle from Angular Material. The slide toggle renders on the client, but nothing happens when I click on it.

I've installed angular material, and it exists in my package.json (^17.0.4). Please explain why the slide toggle is not working.

Here is new-form.component.html:

<mat-slide-toggle>Slide me!</mat-slide-toggle>

And, here is new-form.component.ts:

import {Component} from '@angular/core';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';

@Component({
  selector: 'app-new-form',
  templateUrl: 'new-form.component.html',
  standalone: true,
  imports: [MatSlideToggleModule],
})
export class NewFormComponent {}

Answer 1

You missed adding the CSS in global-styles.css

/* Add application styles & imports to this file! */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

stackblitz

Answer 2

The issue was in my index.html file. I wasn't using the correct syntax to render the root component. Specifically, I was rendering the component using a trailing forward slash:

<app-root/>

When I should have used the traditional way of defining a component:

<app-root></app-root>