Pass map<string,string> as an input to an angular component

Question

I am trying to pass an input value when reusing a component, the problem is that it will be a "hardcoded" map of strings and I am unsure how to pass that:

<continue-p
  [additionalInfo]="{ "myString": "string", "myNumber": "4" }">
  <p>
    Paragraph
  </p>
</continue-p>

and the input field looks like this:

@Input()
  additionalInfo?: Map<string, string>;

PS I am not sure if there is a better structure for passing such information to components, please recommend.

It should be Record<string, string>. Maps are totally different. — k.tten
– k.tten, Commented Sep 19, 2022 at 15:21
@caTS How would I pass that? Would it support multiple entries? — Evan
– Evan, Commented Sep 19, 2022 at 15:26
Record<string, string> is (structurally) equivalent to { [key: string]: string }. So yes, it would support multiple entries. You can read this type as "a type where all of its keys are strings and all of its values are strings". — k.tten
– k.tten, Commented Sep 19, 2022 at 15:27
This seems to work, you can post your answer if you want me to pick it. — Evan
– Evan, Commented Sep 19, 2022 at 15:37

k.tten · Accepted Answer · 2022-09-19 15:40:03Z

1

Maps are different than objects and have their own type Map<K, V>. Since you are using a plain object, you can use Record<K, V> instead.

Record<string, string> is a way to represent { [key: string]; string] }, or an object whose keys are strings and values are strings.

So it'd be as simple as changing Map to Record in your code:

additionalInfo?: Record<string, string>;

answered Sep 19, 2022 at 15:40

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass map<string,string> as an input to an angular component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related