- Remove extra <md-autocomplete> blocks in example. (#7149)

- Add isOpen attribute to `MdAutocomplete` component.

src/demo-app/autocomplete/autocomplete-demo.html

@@ -66,19 +66,6 @@ Space above cards: <input type="number" [formControl]="topHeightCtrl">
   </mat-card>
 </div>
 
-<mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">
-  <mat-option *ngFor="let state of reactiveStates | async" [value]="state">
-    <span>{{ state.name }}</span>
-    <span class="demo-secondary-text"> ({{state.code}}) </span>
-  </mat-option>
-</mat-autocomplete>
-
-<mat-autocomplete #tdAuto="matAutocomplete">
-  <mat-option *ngFor="let state of tdStates" [value]="state.name">
-    <span>{{ state.name }}</span>
-  </mat-option>
-</mat-autocomplete>
-
 <mat-autocomplete #groupedAuto="matAutocomplete">
   <mat-optgroup *ngFor="let group of filteredGroupedStates"
     [label]="'States starting with ' + group.letter">

src/lib/autocomplete/autocomplete-trigger.ts

@@ -169,7 +169,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     this._resetPlaceholder();
 
     if (this._panelOpen) {
-      this._panelOpen = false;
+      this.autocomplete._isOpen = this._panelOpen = false;
 
       // We need to trigger change detection manually, because
       // `fromEvent` doesn't seem to do it at the proper time.
@@ -454,7 +454,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     }
 
     this.autocomplete._setVisibility();
-    this._panelOpen = true;
+    this.autocomplete._isOpen = this._panelOpen = true;
   }
 
   private _getOverlayConfig(): OverlayConfig {

src/lib/autocomplete/autocomplete.spec.ts

@@ -409,6 +409,17 @@ describe('MatAutocomplete', () => {
       expect(inputContainer._animateAndLockPlaceholder).toHaveBeenCalled();
     });
 
+    it('should provide the open state of the panel', async(() => {
+      expect(fixture.componentInstance.panel.isOpen).toBeFalsy(
+        `Expected the panel to be unopened initially.`);
+
+      dispatchFakeEvent(input, 'focusin');
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        expect(fixture.componentInstance.panel.isOpen).toBeTruthy(
+          `Expected the panel to be opened on focus.`);
+      });
+    }));
   });
 
   it('should have the correct text direction in RTL', () => {

src/lib/autocomplete/autocomplete.ts

@@ -58,6 +58,12 @@ export class MatAutocomplete implements AfterContentInit {
   /** Whether the autocomplete panel should be visible, depending on option length. */
   showPanel = false;
 
+  /** Whether the autocomplete panel is open. */
+  get isOpen(): boolean {
+    return this._isOpen && this.showPanel;
+  }
+  _isOpen: boolean = false;
+
   /** @docs-private */
   @ViewChild(TemplateRef) template: TemplateRef<any>;
 
@@ -97,6 +103,8 @@ export class MatAutocomplete implements AfterContentInit {
 
   ngAfterContentInit() {
     this._keyManager = new ActiveDescendantKeyManager<MatOption>(this.options).withWrap();
+    // Set the initial visibiity state.
+    this._setVisibility();
   }
 
   /**