[Angular] Implement a custom form component by using control value accessor

We have a form component:

<label>
<h3>Type</h3>
<workout-type
formControlName="type"
></workout-type>
</label>

form = this.fb.group({
name: ['', Validators.required],
type: 'strength'
});

constructor(
private fb: FormBuilder
) {}

the 'type' FormControl will be a custom form element component which refers to 'workout-type' componet.

For the workout-type component:

import {ChangeDetectionStrategy, Component, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

// Register the control value accessor

export const TYPE_CONTROL_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => WorkoutTypeComponent)
};

@Component({
selector: 'workout-type',
providers: [TYPE_CONTROL_ACCESSOR],
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['workout-type.component.scss'],
template: `
<div class="workout-type">
<div
*ngFor="let selector of selectors"
[class.active]="selector === value"
(click)="setSelected(selector)"
class="workout-type__pane">
<img src="/img/{{selector}}.svg" alt="{{selector}}">
<p>
{{selector}}
</p>
</div>
</div>
`
})
export class WorkoutTypeComponent implements ControlValueAccessor{

selectors = ['strength', 'endurance'];
private onTouch: Function;
private onModelChange: Function;
private value: string;

constructor() {

}

writeValue(value: string): void {
this.value = value;
}

registerOnChange(fn: Function): void {
this.onModelChange = fn;
}

registerOnTouched(fn: Function): void {
this.onTouch = fn;
}

setSelected(value: string): void {
this.value = value;
this.onModelChange(value);
this.onTouch();
}
}