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

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.

CodePudding user response：

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>;