Iterate HTML tags with angular 7? (dynamically)

Question

The interesting thing is that it is a dynamic component that can iterate html attributes and style.

We know that [ngStyle] needs a json object with properties of type css.

I have not seen in angular an [ngAtrributes] that needs a json object with attributes.

The idea and goal is to create dynamic html elements to be able to render.

Thinking about a dynamic form is not a good idea because I would lack elements such as a div, img, etc.

I tried with this approach: https://stackoverflow.com/a/48481199/9420442 It's very good, but it has a missing one, how could I enter text inside the tags ?, for example: <div> Hello world! </ Div> how could I enter 'Hello world!' with this proposal?

The main one I want is this:

HTML:

<{{tag.tagName}} *ngFor="let tag in tags"
                 [ngStyle]="tag.style"
                 [ngAtrr]="tag.atrributes">
                 {{tag.text}}
</{{tag.tagName}}>

TS:

this.tags = [
    {
      tag: 'div',
      atrributes: [
        {'class': 'text-center'}
      ],
      'style': [
        {'back-ground-color': 'red'},
        {'color': 'blue'}
      ],
      'text': 'Hello World!'
    },
    {
      tag: 'input',
      type: 'number'
      atrributes: [
        {'max': '10'},
        {'place-holder': 'hello hello!'}
      ],
      'style': [
        {'back-ground-color': 'red'},
        {'color': 'blue'}
      ],
      'value': '100'
    }
];

This is what I expect. Could you help me a little on how to achieve this functionality?

<div class="text-center">Hello World!</div>

<input type="number" placeHolder="hello world" max="10" value="100"></input>

Have you looked at building an attribute directive to handle this? angular.io/guide/attribute-directives#attribute-directives — DeborahK
– DeborahK, Commented Feb 1, 2019 at 21:12

Tamer Hussien · Accepted Answer · 2019-02-01 19:26:57Z

0

i think it should be written in this way

<div  *ngFor="let tag in tags">
  <{{tag.tagName}}
                 [ngStyle]="tag.style"
                 [ngAtrr]="tag.atrributes">
                 {{tag.text}}
  </{{tag.tagName}}>
</div>

answered Feb 1, 2019 at 19:26

Tamer Hussien

8571 gold badge10 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Iterate HTML tags with angular 7? (dynamically)

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