Angular-how To Use Spread Operator In Angular Html Template

I have a simple angular app with a module and a component. For the sake of simplicity let us assume that the component ts and the template file is like the following snippet In th

Solution 1:

One way to do this could be create a directive like

import { Directive, ElementRef, HostListener, Input } from'@angular/core';

@Directive({
  selector: '[setAttr]'
})
exportclassAttrDirective {

  constructor(private el: ElementRef) { }

  @Input() attr: any;

  ngOnInit(){
    if(this.attr){
       console.log(this.el.nativeElement)
      Object.keys(this.attr).forEach(k=>{
        this.el.nativeElement.setAttribute(k,this.attr[k])
      console.log(this.el.nativeElement)
      })
    }
  }
}

then apply on input like

<inputtype="text" setAttr [attr]="val">

demo