Recently, I started working on a simple project:
https://stackblitz.com/edit/angular-rktmgc-ktjk3n?file=index.html
The main code resides in: /index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="mat-app-background basic-container">
<br />
<a href="https://material.angular.io/components/slide-toggle/api">API reference for Angular Material slide-toggle</a><br /><br />
<select-reset-example>loading</select-reset-example>
<div style="margin-top:30px;">
<div style="color:#f00;margin-bottom:20px;">
Here is what I am trying to achieve (not working as expected):
</div>
<mat-slide-toggle>Slide me!</mat-slide-toggle>
</div>
</div>
The code snippet for: /app/select-reset-example.html
<mat-slide-toggle>Slide me!</mat-slide-toggle>
While loading the component: mat-slide-toggle within select-reset-example works fine, it doesn't work when trying to load it directly on index.html.
My query is regarding the configuration of the following /main.ts file to render the mat-slide-toggle directly on index.html.
In case there is a scope issue, is it feasible to create a custom component inheriting from mat-slide-toggle or MatSlideToggleModule class?
If possible, could you please fork the project on stackblitz.com and share the link with the necessary configuration?
import './polyfills';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSlideToggleModule } from '@angular/material';
import { SelectResetExample } from './app/select-reset-example';
import { HttpModule } from '@angular/http';
import { CdkTableModule } from '@angular/cdk/table';
@NgModule({
exports: [
MatSlideToggleModule,
]
})
export class DemoMaterialModule { }
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
DemoMaterialModule,
ReactiveFormsModule,
],
entryComponents: [SelectResetExample],
declarations: [SelectResetExample],
bootstrap: [SelectResetExample],
providers: []
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
Here is the project structure for your reference:
https://i.sstatic.net/geeT3.png
Thank you!