Я создал многократно используемый компонент "my-textarea", который указан ниже
<div>
<label *ngIf="label" [attr.for]="id">{{label}}</label>
<textarea #textarea [attr.id]="id"></textarea>
</div>
И я использую его как
<my-textarea id="txtResponse"></my-textarea>
Проблема в том, что когда я проверяю свой HTML, это выглядит как
<my-textarea id="txtResponse">
<div>
<label *ngIf="label" [attr.for]="txtResponse">{{label}}</label>
<textarea #textarea [attr.id]="txtResponse"></textarea>
</div>
</my-textarea>
Это означает, что все элементы управления, имеющие идентификатор, отображают один и тот же идентификатор, т.е. txtResponse . Почему он показывает один и тот же идентификатор для всех полей и как я могу от него избавиться? Если я не передаю id в my-textarea, тогда он не показывает id дочернего элемента.