'Cannot output HTML attributes from the JSON object

I have a JSON object. It looks like the following:

schema = [
      {
          "group": "class=\"col-lg-6\"",
          "label": {
              "text": "Full Name", 
              "attributes": "class=\"control-label\" for=\"FullName\""
          },
          "control": {
              "attributes": "class=\"form-control\" name=\"FullName\""
          }
      }
  ]

I'm looping the items of the JSON object in HTML and trying to output the HTML attributes to the div.

<div class="container">
    <div class="row">
        <div *ngFor="let item of schema;" {{ item.group }}>
            <label for="exampleFormControlInput1" class="form-label">{{ item.label.text }}</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
        </div>
    </div>
</div>

When doing so I get the following error message.

ERROR Error: Failed to execute 'setAttribute' on 'Element': '{{' is not a valid attribute name.

Here's the codesandbox.io

angular

Solution 1:^[1]

I think you cannot bind the attribute as is. You have to tell the angular which attributes you are going to make dynamic. i.e. You can only bind the values.

One thing you can do is to separate the response as key-value pairs, provided the key is the known attribute.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	vsnikhilvs

'Cannot output HTML attributes from the JSON object

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]