I need to wrap a mat-slide-toggle component on my own, I wrote:
mytoggle.component.ts
import { Component, OnInit, Input, forwardRef, ViewChild, ElementRef } from '@angular/core';
import {MatSlideToggle, MatSlideToggleChange} from '@angular/material/slide-toggle';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'ng7-common-ng7-slide',
templateUrl: 'ng7-slide.component.html',
styles: [],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => Ng7SlideComponent),
multi: true
}
]
})
export class Ng7SlideComponent extends MatSlideToggle {
}
And mytoggle.component.html:
{{label}}
and in my app I'm using like this:
app.component.html
<!-- THIS WORKS <mat-slide-toggle formControlName="slideToggle">Enable Wifi -->
app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
@Component({
selector: 'home-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
formGroup: FormGroup;
constructor(formBuilder: FormBuilder) {
this.formGroup = formBuilder.group({
slideToggle: false
});
}
onFormSubmit(formValue: any) {
alert(JSON.stringify(formValue, null, 2));
}
}
So the formValue on onFormSubmit method always alerts "slideToggle":false no matter is it is checked or not, when I use mat-slide-toggle it alerts true or false according with the toggle state correctly.
Are there anything else to do? I just need to extend the component and all event.
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
