How to use the @angular/core.HostBinding function in @angular/core

writeValue(value: any): void {
        if (value !== null) {
            this.values = value;
        }

        this.checked = this.values.indexOf(this.value) >= 0;
        super.writeValue(this.checked);

        // console.log('writeValue: id=' + this.id + ', name=' + this.name
        //  + ', values=' + JSON.stringify(this.values) + ', checked=' + this._value);
    }

    /**
     * 扩展样式
     */
    @HostBinding('class') get hostCls(): string {
        return [super.getBasicControlCls(), 'weui-check__label', (this.additionalCls || '')].join(' ');
    }

    constructor(private renderer: Renderer, private elementRef: ElementRef) {
        super(renderer, elementRef);
        this.value = 'on'; // default value
    }

}

selector: 'button[soho-nav-button]', // tslint:disable-line
  template: `
              <span class="icon app-header">
        <span class="one"></span>
        <span class="two"></span>
        <span class="three"></span>
      </span>
              <span class="audible">
        
      </span>
            `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SohoToolbarNavButtonComponent {
  // This HostBinding needs to go first to maintain correct styling
  @HostBinding('class.btn-icon') get isIconButton() { return true; }
  @HostBinding('class.application-menu-trigger') get isAppMenuTrigger() { return true; }
  @HostBinding('attr.type') get typeAttr() { return 'button'; }
}

/**
 * Soho toolbar title
 */
@Component({
  selector: 'soho-toolbar-title',
  template: ``,
  styles: [`{ display:inline-block }`],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SohoToolbarTitleComponent {
  @HostBinding('class.title') get isTitle() { return true; }
}

NgZone,
  OnDestroy,
  Output,
} from '@angular/core';

@Component({
  selector: '[soho-pie]', // tslint:disable-line
  template: '',
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class SohoPieComponent implements AfterViewInit, AfterViewChecked, OnDestroy {
  /** Options. */
  private options: SohoPieOptions = {};

  @HostBinding('class.chart-container') get isPie() {
    return true;
  }

  /** Defines the data to use, must be specified for this component. */
  @Input() set dataset(dataset: Array) {
    this.options.dataset = dataset;

    if (this.pie) {
      this.pie.settings.dataset = dataset;
      this.updateRequired = true;
    }
  }

  /** If true it renders as a donut chart. */
  @Input() set isDonut(value: boolean) {
    this.options.isDonut = value;

constructor() {
        console.log('Do nothing directive');
    }

    ngOnDestroy() {

    }

    public submitTriggered() {

    }

    /**
     * HostBinding description
     */
    @HostBinding('style.color') color: string;

    /**
     * HostListener description 1
     */
    @HostListener('mouseup', ['$event.clientX', '$event.clientY'])
    onMouseup(mouseX: number, mouseY: number): void {

    }
    /**
     * HostListener description 2
     */
    @HostListener('mousedown', ['$event.clientX', '$event.clientY'])
    onMousedown(mouseX: number, mouseY: number): void {

    }
    /**

})
export class OwlDateTimeTriggerDirective implements OnInit, OnChanges, AfterContentInit, OnDestroy {

    @Input('owlDateTimeTrigger') dtPicker: OwlDateTimeComponent;

    private _disabled: boolean;
    @Input()
    get disabled(): boolean {
        return this._disabled === undefined ? this.dtPicker.disabled : !!this._disabled;
    }

    set disabled( value: boolean ) {
        this._disabled = value;
    }

    @HostBinding('class.owl-dt-trigger-disabled')
    get owlDTTriggerDisabledClass(): boolean {
        return this.disabled;
    }

    private stateChanges = Subscription.EMPTY;

    constructor( protected changeDetector: ChangeDetectorRef ) {
    }

    public ngOnInit(): void {
    }

    public ngOnChanges( changes: SimpleChanges ) {
        if (changes.datepicker) {
            this.watchStateChanges();
        }

import * as d3 from 'd3';
import * as nv from 'nvd3';

import { Component, ElementRef, HostBinding, OnInit } from '@angular/core';

import { DiscreteBarChartService } from './discrete-bar-chart.service';

@Component({
  selector: 'app-discrete-bar-chart',
  styleUrls: ['./discrete-bar-chart.component.scss'],
  template: ``,
  providers: [DiscreteBarChartService],
})
export class DiscreteBarChartComponent implements OnInit {
  @HostBinding('class.discrete-bar-chart__container') private readonly discreteBarChartContainer = true;

  constructor(
    private discreteBarChartService: DiscreteBarChartService,
    private el: ElementRef,
  ) { }

  public ngOnInit() {
    const container = d3.select(this.el.nativeElement);
    if (container[0][0]) {
      const colors = [
        '#7726d3',
        '#ff5252',
        '#ffc107',
        '#00bcd4',
        '#00d45a',
        '#51a8f9',

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FilterComponent implements OnInit, OnDestroy {

  @Input() table: DataTable;

  left: number;
  top: number;
  column: Column = new Column({});

  @HostBinding('class') cssClass = 'dropdown-filter-menu';

  @HostBinding('style.left.px')
  get getLeft(): number {
    return this.left;
  }

  @HostBinding('style.top.px')
  get getTop(): number {
    return this.top;
  }

  @HostBinding('style.width.px')
  get getWidth(): number {
    return this.table.dimensions.columnMenuWidth;
  }

  @HostBinding('style.display')
  get getDisplay(): string {

__metadata('design:type', Object)
    ], MdSidenav.prototype, "onOpen", void 0);
    __decorate([
        core_1.Output('close-start'), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "onCloseStart", void 0);
    __decorate([
        core_1.Output('close'), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "onClose", void 0);
    __decorate([
        core_1.HostBinding('class.md-sidenav-closing'), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "_isClosing", null);
    __decorate([
        core_1.HostBinding('class.md-sidenav-opening'), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "_isOpening", null);
    __decorate([
        core_1.HostBinding('class.md-sidenav-closed'), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "_isClosed", null);
    __decorate([
        core_1.HostBinding('class.md-sidenav-opened'), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "_isOpened", null);
    __decorate([
        core_1.HostBinding('class.md-sidenav-end'), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "_isEnd", null);
    __decorate([
        core_1.HostBinding('class.md-sidenav-side'),

templateUrl: './ghettobox-container.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GhettoboxContainerComponent extends BasePortalOutlet
  implements AfterContentInit, OnDestroy {
  @Input()
  @HostBinding()
  id = `sbb-ghettobox-container-${counter++}`;

  @HostBinding('attr.role') role = 'region';

  @HostBinding('attr.aria-live') ariaLive = 'assertive';

  @HostBinding('attr.aria-relevant') ariaRelevant = 'all';

  @HostBinding('class.sbb-ghettobox-container')
  containerClass = true;

  @HostBinding('attr.tabindex')
  tabIndex = '-1';

  /** The portal where to attach the ghettoboxes generated by the service */
  @ViewChild(CdkPortalOutlet, { static: true }) portalOutlet: CdkPortalOutlet;

  /**
   * Initial entries projected from the consumer
   */
  @ContentChildren(GhettoboxComponent) initialGhettoboxes: QueryList;

  constructor(private _ghettoboxContainerService: GhettoboxContainerService) {
    super();
    if (!this._ghettoboxContainerService.hasContainerLoaded) {

@Input()
  set alignContent(value) {
    this._alignContent = value;
  }

  @HostBinding('class.am-flexbox')
  amFlexbox: boolean = true;
  @HostBinding('class.am-flexbox-dir-row')
  get amFlexboxDirRow() {
    return this._direction === 'row';
  }
  @HostBinding('class.am-flexbox-dir-row-reverse')
  get amFlexboxDirRowReverse() {
    return this._direction === 'row-reverse';
  }
  @HostBinding('class.am-flexbox-dir-column')
  get amFlexboxDirColumn() {
    return this._direction === 'column';
  }
  @HostBinding('class.am-flexbox-dir-column-reverse')
  get amFlexboxDirColumnReverse() {
    return this._direction === 'column-reverse';
  }
  @HostBinding('class.am-flexbox-nowrap')
  get amFlexboxNowrap() {
    return this._wrap === 'nowrap';
  }
  @HostBinding('class.am-flexbox-wrap')
  get amFlexboxWrap() {
    return this._wrap === 'wrap';
  }
  @HostBinding('class.am-flexbox-wrap-reverse')