I have an app with Angular12 and the Angular Material CDK.
I am adding a template into a CDK Portal, the template is this:
<ng-template #templatePortalContent>
<div class="editable" #newFormField>
stuff
</div>
</ng-template>
I need to add a class dynamically to the #newFormField item and can't figure out how to access it. Normally, if this was a regular ng-template such as #addressBlock I can use
@ViewChild('addressBlock') addressBlock: ElementRef;
this.addressBlock.nativeElement.classList.add('editingActive');
However, this does not work and throws an error
@ViewChild('newFormField') newFormField: ElementRef;
this.newFormField.nativeElement.classList.add('editingActive');
I figure because the newFormField is inside the #templatePortalContent template which was inserted into the portal.
How do I refer to the inner element?
That template will be able to access component properties from where it's declared. The ViewChild will also be accessible once the template is rendered (I'm pretty sure 👀)
<ng-template #templatePortalContent>
<div [ngClass]="editableClass" #newFormField>
stuff
</div>
</ng-template>
// In the component
public editableClass = 'editable'