Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Pass key-value pairs of object as individual arguments to component in Angular

Assume i have a component that takes three inputs input1, input2 and input3

export class testComponent {
  @Input() input1:string;
  @Input() input2:string;
  @Input() input3:string;
  ....
  ...
}

In the parent component I have object like

args = {
    input1: "string1",
    input2: "string2",
    input3: "string3"
}

what is the best way to pass these key value pairs in object as arguments to the testComponent.
All the inputs to testComponent are not mandatory and the args sometimes might not have all the arguments.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I don’t want the testComponent to take object itself as the input. Pls suggest some ideas. Thankyou.

>Solution :

You have to do it manually, its a limitation of angular, like we cannot de-structure the object (...args) on the html tag and the child component will read the values like how react does!

<app-test [input1]="args?.input1" [input2]="args?.input2" [input3]="args?.input3"/>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading