The autocomplete trigger has a panelOpen property. Have you tried using that instead of toggling it here? You should be able to do a ViewChild query for 'auto' to get a reference to the trigger.

host: {
   '[class.expanded]': '_autocompleteTrigger?.panelOpen'
}

I believe this will cause the input to expand only when the user starts typing and suggesting show up. We want the input to enlarge right when the user focuses it so I'm using the _isExpanded here instead

The autocomplete panel should appear whenever the input is focused. If that's not happening, seems like an autocomplete bug.

I think I may be. It seems that the first time the field is focused it does not show the panel, and the second time the field is focused it does show it.

Move this to the host object in the Component metadata? Generally prefer that instead of using the decorator.

I added it as a decorator as the docs on angular.io suggest it's better to prefer the decorator over the metadata: https://angular.io/docs/ts/latest/guide/style-guide.html#!#06-03

In Material, we actually do the opposite because @HostBinding causes issues with Angular Universal (which it seems the docs authors weren't aware of)

Ahh, I see. Alrighty, I'll switch it up 👍

Does this also navigate when you click on the option? Also have you considered switching to the optionSelections observable on the trigger rather than this event? It emits any option object that is selected (via the keyboard or the mouse).

Another idea would be to bind the entire item as the option value, and use the displayWith property on md-autocomplete to map that object to its display value (the name). That way, you don't have to go through the list in navigate() to find the ID that matches the search string. You can just get the object itself on selection and pass through its ID to the route.

Can you restrict the import a bit? From 'rxjs/Observable'

To elaborate: when you import from just rxjs, it brings in a lot of than just what you're using and increases the payload size.