How to set more than one props in Angular template?

Question

React JSX

<div {...props}></div>

Vue

<div v-bind="$props"></div>

Angular

// how to do?

Answer 1

You decorate properties with the @Input() decorator on the component's class

@Component({
  template: 'someHtml',
  selector: 'my-component'
})
class MyComponent() {
  @Input() prop1;
  @Input() prop2;
}

and set them in the template of the consuming component with property binding

<my-component [prop1]="someValue" [prop2]="anotherValue"></my-component>

Answer 2

If props is an array you can iterate with *ngFor

 <div *ngFor="let prop of props"> <p>{{prop}}</p> </div>