CODEWITHSUNDEEP
angulartypescript
Sohaib
Sohaib

Reputation: 11297

Pass props using ES6 spread operator

ChildComponent.ts

export class ChildComponent implements OnInit {
  @Input() name?: string;
  @Input() email?: string;
  // A lot more props

  constructor() {}

  ngOnInit(): void {}
}

ParentComponent.ts

export class ParentComponent implements OnInit {
  childProps = {
    name: "johnny",
    email: "[email protected]"
  };

  constructor() {}    
  ngOnInit(): void {}
}

ParentComponent.html

This works:

<app-child [name]="childProps.name" [email]="childProps.email"></app-child>

But how do I pass all props using ES6 spread operator?

<app-child [*]="{...childProps}"></app-child>

Upvotes: 2

Views: 1493

Answers (1)

Sam Scholefield
Sam Scholefield

Reputation: 1250

You could consider defining an interface for the props and then pass as an object, no need for spread or using multiple @Inputs().

// child.ts

export interface ChildProps {
  name?: string,
  email?: string  ​
}

export class ChildComponent implements OnInit {
 ​@Input() allProps?: ChildProps;
​
 ​constructor() {}

 ​ngOnInit(): void {}
}

//parent.ts

export class ParentComponent implements OnInit {
  childProps = {
    name: "johnny",
    email: "[email protected]"
  };

  constructor() {}    
  ngOnInit(): void {}
}

<!-- parent-template.html -->

<app-child [allProps]="childProps"></app-child>

<!-- child-template.html -->

<div>{{ allProps?.name }}</div>

Upvotes: 1

Related Questions