bug(MatAutocomplete): Drop-down list is not shown if options are rendered over ng-container with ngTemplateOutlet.

[HerrRomich]

Reproduction

Steps to reproduce:

1. https://stackblitz.com/edit/components-issue-bws6ya
   mat-autocomplete is filled with options over observable.
   elements are provided inside <ng-container *ngIf="(entryCategories$ | async) as entryCategories">
   over <ng-container *ngTemplateOutlet="subCategories; context: { elements: elements} the options won't be shown as a drop-down list.
   The full example is provided here: https://stackblitz.com/edit/components-issue-bws6ya

Expected Behavior

The options should be shown in a drop-down list

Actual Behavior

The drop-down list is not rendered.

---

First analysis has shown, that the drop-down-listis rendered with CSS class "mat-autocomplete-hidden", although the options are all rendered.

Deeper analysis has shown, that the value for variable in ng-container is gotten later as the ngAfterContentInit() of MatAutocomplete will be processed. So the value of options from @ContentChildren(MatOption, {descendants: true}) options: QueryList; is empty. Further so it will be set a CSS class on drop-down list to hide it.
I would suggest to use here this.options.changes as observable of changes in a list of options.

Environment

• Angular: 9
• CDK/Material: 9
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

Since we use ContentChildren to get a hold of all the options, it means that the mat-option elements have to be declared as descendants of mat-autocomplete inside the markup. It should work if you move the template inside mat-autocomplete. Closing since there isn't much we can do about it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}