Tengo una aplicación con Angular12 y Angular Material CDK.
Estoy agregando una plantilla en un portal de CDK, la plantilla es esta:
<ng-template #templatePortalContent> <div class="editable" #newFormField> stuff </div> </ng-template> Necesito agregar una clase dinámicamente al elemento #newFormField y no sé cómo acceder a él. Normalmente, si se tratara de una plantilla ng regular como #addressBlock , puedo usar
@ViewChild('addressBlock') addressBlock: ElementRef; this.addressBlock.nativeElement.classList.add('editingActive');Sin embargo, esto no funciona y arroja un error.
@ViewChild('newFormField') newFormField: ElementRef; this.newFormField.nativeElement.classList.add('editingActive'); Me imagino que el nuevo campo de newFormField está dentro de la plantilla #templatePortalContent que se insertó en el portal.
¿Cómo me refiero al elemento interior?
Esa plantilla podrá acceder a las propiedades del componente desde donde se declara. También se podrá acceder a ViewChild una vez que se represente la plantilla (estoy bastante seguro 👀)
<ng-template #templatePortalContent> <div [ngClass]="editableClass" #newFormField> stuff </div> </ng-template> // In the component public editableClass = 'editable'