import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ToggleComponent } from './toggle/toggle.component';

@NgModule({
    declarations: [
        AppComponent,
        ToggleComponent
    ],
    imports: [ BrowserModule ],
    bootstrap: [ AppComponent ],
    entryComponents: [ ToggleComponent ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {
}

// Imports...

@Component({
    templateUrl: './toggle.component.html',
    styleUrls: [ './toggle.component.scss' ],
    encapsulation: ViewEncapsulation.ShadowDom,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ToggleComponent implements OnInit, OnChanges {
    @ViewChild('cb') cb;
    @Input() size = 90;
    @Input() width = 200;
    @Input() height = 100;
    @Output() change = new EventEmitter<boolean>();

    constructor(private ref: ChangeDetectorRef) {}

    // Component logic here...
}

// Imports...

@Component({
    selector: 'ngx-toggle',
    templateUrl: './toggle.component.html',
    styleUrls: [ './toggle.component.scss' ],
    encapsulation: ViewEncapsulation.ShadowDom,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ToggleComponent implements OnInit, OnChanges {
    // Component logic here...
}

// Imports...

@Component({
    templateUrl: './toggle.component.html',
    styleUrls: [ './toggle.component.scss' ],
    encapsulation: ViewEncapsulation.ShadowDom,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ToggleComponent implements OnInit, OnChanges {
    // Component logic here...
}

<template id="element-details-template">
  <span>
    <code class="name"><slot name="title"></slot></code>
    <p class="desc"><slot name="description"></slot></p>
  </span>
  <hr>
</template>

<element-details>
  <span slot="title">HTML Templates</span>
  <span slot="description">A mechanism for holding client-
    side content that is not to be rendered when a page is
    loaded but may subsequently be instantiated during
    runtime using JavaScript.</span>
</element-details>

<script>
  // Define Web Component
</script>

<ngx-toggle (change)="onChange($event)">
    <span slot="on" class="fas fa-dollar-sign"></span>
    <span slot="off" class="fas fa-euro-sign"></span>
</ngx-toggle>

<input #cb type="checkbox" id="switch" (click)="onClick($event)">
<label for="switch" [ngStyle]="styles.label">
    <span class="dot" [ngStyle]="styles.dot"></span>

    <span class="on" [ngStyle]="styles.on">
        <slot name="on"></slot>
    </span>

    <span class="off" [ngStyle]="styles.off">
        <slot name="off"></slot>
    </span>
</label>

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": []
    },
    "angularCompilerOptions": {
        "enableIvy": true
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

{
    // Other stuff here...
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.10.0",
        "@angular/cli": "~7.0.3",
        "@angular/compiler-cli": "~7.0.0",
        "@angular/language-service": "~7.0.0",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "~4.5.0",
        "document-register-element": "1.8.1",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~3.0.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        // etc...
    }
}