Skip to content

Instantly share code, notes, and snippets.

Avatar

Sébastien Sougnez ssougnez

View GitHub Profile
View ng-on-off-17.ts
import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-on-off',
templateUrl: './on-off.component.html',
styleUrls: ['./on-off.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'role': 'checkbox',
View ng-on-off-16.ts
constructor(private _cdr: ChangeDetectorRef) { }
public switch(value: boolean) {
if (value !== this.value && this.disabled === false) {
this._value = value;
this.change.emit(this.value);
if (this.onChange) {
this.onChange(this.value);
View ng-on-off-15.ts
@Input()
public get value(): boolean { return this._value; }
public set value(obj: boolean) {
this.switch(obj);
}
View ng-on-off-13.ts
this.form = this._fb.group({
[Fields.Enabled]: [{ value: true, disabled: true }]
});
View ng-on-off-12.ts
<form [formGroup]="form">
<app-on-off [formControlName]="Fields.Enabled"></app-on-off>
</form>
<pre>{{ form.value | json }}</pre>
View ng-on-off-11.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
enum Fields {
Enabled = "enabled"
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
View ng-on-off-10.ts
'(blur)': 'onTouched && onTouched()'
View ng-on-off-09.ts
public onTouched: () => void;
public registerOnTouched(fn: any): void {
this.onTouched = fn;
}
View ng-on-off-08.ts
public switch(value: boolean) {
if (value !== this.value && this.disabled === false) {
this.value = value;
this.change.emit(this.value);
if (this.onChange) {
this.onChange(this.value);
}
}