ng-content select не работает "<элемент> не является известным элементом"

Question

Я следую этому уроку так:

<div class="app-autocomplete">    
  <mat-form-field>
    <mat-form-field>
      <div class="app-autocomplete-input">
        <ng-content select="app-autocomplete-input"></ng-content>
      </div>
    </mat-form-field>
    <button mat-icon-button type="button" [disabled]="disabled">
      <mat-icon>clear</mat-icon>
    </button>
  </mat-form-field>

  <!-- ... --> 
</div>

Но я получаю

Uncaught Error: Ошибки синтаксического анализа шаблона: 'app-autocomplete-input' не является известным элементом:

1. Если 'app-autocomplete-input' является угловым компонентом, то убедитесь, что он является частью этого модуля.
2. Если 'app-autocomplete-input' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@NgModule.schemas' этого компонента, чтобы подавить это сообщение. (" [ОШИБКА ->] ...

и я не совсем понимаю, в чем здесь проблема.

Вот как я пытаюсь использовать app-autocomplete:

<app-autocomplete>          
  <app-autocomplete-input>
    <input placeholder="Yo"/>
  </app-autocomplete-input>          
</app-autocomplete>

Answer 1

Задача

Фактическая цель вашего заключается в том, чтобы использовать Content Projection для дальнейшей настройки компонента при использовании.

вопрос

Основная проблема заключается в использовании пользовательских компонентов app-autocomplete-input который нигде не предоставляется.

исправлять

Поскольку у вас нет пользовательского компонента, и вы никогда не намеревались иметь пользовательский компонент. Вы используете простой HTML-тег, как divspan или вы можете использовать класс CSS autocomplete-input,

Модифицированный код

<div class="app-autocomplete">    
  <mat-form-field>
    <mat-form-field>
      <div class="app-autocomplete-input">
        <ng-content select=".app-autocomplete-input"></ng-content>
      </div>
    </mat-form-field>
    <button mat-icon-button type="button" [disabled]="disabled">
      <mat-icon>clear</mat-icon>
    </button>
  </mat-form-field>

  <!-- ... --> 
</div>

приложение-autocomplete.html

<app-autocomplete>          
  <div class="app-autocomplete-input">
    <input placeholder="Yo"/>
  </div>          
</app-autocomplete>