From 3f0142b51e075954ea1c832c1076b8b33c9bbaca Mon Sep 17 00:00:00 2001
From: mmalerba <mmalerba@google.com>
Date: Wed, 4 Oct 2017 16:41:27 -0700
Subject: [PATCH] chore: don't use HostBinding in example (#7540)

---
 .../form-field-custom-control-example.ts             | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts b/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
index 10a52245175..7aa65c0b762 100644
--- a/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
+++ b/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
@@ -1,6 +1,6 @@
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Component, ElementRef, HostBinding, Input, OnDestroy, Renderer2} from '@angular/core';
+import {Component, ElementRef, Input, OnDestroy, Renderer2} from '@angular/core';
 import {FormBuilder, FormGroup} from '@angular/forms';
 import {MatFormFieldControl} from '@angular/material/form-field';
 import {Subject} from 'rxjs/Subject';
@@ -18,6 +18,11 @@ export class MyTel {
   templateUrl: 'form-field-custom-control-example.html',
   styleUrls: ['form-field-custom-control-example.css'],
   providers: [{provide: MatFormFieldControl, useExisting: MyTelInput}],
+  host: {
+    '[class.floating]': 'shouldPlaceholderFloat',
+    '[id]': 'id',
+    '[attr.aria-describedby]': 'describedBy',
+  }
 })
 export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
   static nextId = 0;
@@ -39,14 +44,13 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
     return !n.area && !n.exchange && !n.subscriber;
   }
 
-  @HostBinding('class.floating')
   get shouldPlaceholderFloat() {
     return this.focused || !this.empty;
   }
 
-  @HostBinding() id = `my-tel-input-${MyTelInput.nextId++}`;
+  id = `my-tel-input-${MyTelInput.nextId++}`;
 
-  @HostBinding('attr.aria-describedby') describedBy = '';
+  describedBy = '';
 
   @Input()
   get placeholder() {