htmlangulartypescriptelementref

How to set classes for an HTML reference from within the HTML code Angular?

I have a reference to a textarea

<*wrapper-component (submit)="tx1.value ? submit(tx1.value) : tx1.setClass('required')??">
<textarea #tx1> <textarea>
</*wrapper-component>

which I pass the value of into my submit function, is it possible to set classes for my tx1 element from the HTML itself instead of creating a ViewChild property and accessing elRef.nativeElement.setClass with typeScript?

Solution

  • I'd normally suggest using [ngClass] binding for setting CSS selectors dynamically. However, if you insist on using a template ref variable, you could use the setAttribute() method to set attributes, in your case 'class'.

    <*wrapper-component (submit)="tx1.value ? submit(tx1.value) : tx1.setAttribute('class', 'required')">
  <textarea #tx1> <textarea>
</*wrapper-component>