Search code examples
angulartypescriptviewchild

Template variable, read a custom instance directly in template

I am aware you can read specific instances of a template variable by using the read property of a @ViewChild decorator : 

@ViewChild('child', { read: CustomComponent }) component: CustomComponent;

I am currently using a Material card and I give it a template variable. What I want is to scroll to the bottom of that card at every keydown on the inner textarea : 

<mat-card #card>
  <textarea (keydown)="scrollCardToBottom($event, card)"></textarea>
</mat-card>

Is it possible to consider card as an ElementRef directly from the template ? Right now, it is considered a MatCard, and I have to use the decorator to transform it into an ElementRef ...

Solution

  • I also miss this feature but unfortunately there is no solution right now to force template reference variable to be ElementRef rather than directive instance on a template side.

    See also: