Бутстрап-пуговица угловая 5

Question

Я пытаюсь реализовать http://www.bootstraptoggle.com/ в angular 5 без использования jquery и javascript.

Я использую директиву, заключенную в компонент, чтобы он выглядел правильно. Я нашел решение этой части здесь. Этот вариант наиболее целесообразен для меня, потому что он примерно такой же, как bootstrap-toggle.js.

Мне удалось настроить внешний вид, передав объект конфигурации, аналогичный параметрам, используемым в bootstrap-toggle. Единственное, чего сейчас не хватает, - это изменить значение ввода при переключении элемента. Вот Plunker того, что я сделал до сих пор. Есть два флажка, один из которых использует загрузочный тумблер, когда входное значение не обновляется, и один чистый флажок, который работает так, как я хочу, чтобы переключение было выполнено.

Вот компонент приложения:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <form [formGroup]="form">
        <input type="checkbox" formControlName="toggle" *appToggle="{on:'Open', off:'Closed', width: '80px', onStyle: 'success', offStyle:'danger'}">
        <input type="checkbox" formControlName="clean">
      </form>
      Toggle: {{form.get('toggle').value}}<br>
      Clean: {{form.get('clean').value}}
    </div>
  `,
})

Это директива:

@Directive({
  selector: '[appToggle]'
})
export class ToggleDirective implements OnInit {
  options: Object;
  @Input() set appToggle(options: Object) {
    this.options = options || {};
  };

    private inputContainer: ComponentRef<ToggleWrapperComponent>;

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainerRef: ViewContainerRef,
        private componentFactoryResolver: ComponentFactoryResolver
    ) {}

    ngOnInit() {
        const containerFactory = this.componentFactoryResolver.resolveComponentFactory(ToggleWrapperComponent);
        this.inputContainer = this.viewContainerRef.createComponent(containerFactory);
        this.inputContainer.instance.template = this.templateRef;
        this.inputContainer.instance.options = this.options;
    }
}

И компонент оболочки:

@Component({
    selector: 'app-toggle-wrapper',
    template: `
    <ng-container #test *ngTemplateOutlet="template"></ng-container>
    <div class="toggle-group">
        <label class="btn toggle-on" [ngClass]="options.onStyle">{{options.on}}</label>
        <label class="btn active toggle-off" [ngClass]="options.offStyle">{{options.off}}</label>
        <span class="toggle-handle btn btn-default"></span>
    </div>
`,
    host: {
        '[class.toggle]' : 'true',
        '[class.btn]' : 'true',
        '[class.btn-primary]': 'true'
    }
})
export class ToggleWrapperComponent implements OnInit {
  @HostBinding('class.off') isOff = false;
  @HostListener('click') toggleOn() {
    this.isOff = !this.isOff;
  }

    @Input() template: TemplateRef<any>;
    @Input() options: Object;

    constructor(private element: ElementRef, private renderer: Renderer2) {}

    ngOnInit() {
      this.isOff = this.options.start || true;
        this.options.on = this.options.on || 'On';
        this.options.off = this.options.off || 'Off';
        this.options.width = this.options.width || '100px';
        this.options.height = this.options.height || '34px';
        if(this.options.onStyle) { 
          this.options.onStyle = {['btn-' + this.options.onStyle] : true} 
        } else {
          this.options.onStyle = {'btn-primary': true};
        }
        if(this.options.offStyle) { 
          this.options.offStyle = {['btn-' + this.options.offStyle] : true} 
        } else {
          this.options.offStyle = {'btn-default': true};
        }
        let elem = this.element.nativeElement;
        this.renderer.setStyle(elem, "width", this.options.width);
        this.renderer.setStyle(elem, "height", this.options.height);
    }
}

Можно ли получить дескриптор элемента ввода в компоненте-обертке для изменения ввода или мне нужно использовать EventEmitter для передачи изменения в родительский компонент, и как мне это сделать?