Angular 2 - Creating a list of items with same div elements and dynamic content

Question

I would like to create a list of item. Each item will have a collection of elements within a div as labeled with "div for item 1" below. The number of items are not fixed thus the divs will required to be created dynamically. How do I accomplish that? Do I need to create each element one by one? Is there a better and faster approach?

In component.html

<div>
   <div> //div for item 1
      <div style="background-image: url(urlx)">
         <span>{{text1}}</span>
      </div>
      <div>
         <p>{{text2}}</p>
      </div>
      <a href="" title="DISCOVER">DISCOVER</a>
   </div>
   //div for item 2
   //div for item 3
   //....
</div>

dev-assassin · Accepted Answer · 2018-07-18 01:25:10Z

1

You can use *ngFor statement. for example.

<div *ngFor="let list of lists">
 <div>
  <div style="background-image: url(urlx)">
   <span>{{list.text1}}</span>
    ...
  </div>
 </div>
</div>

also, you have to declare lists in .ts file.

answered Jul 18, 2018 at 1:25

dev-assassin

2712 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Angular 2 - Creating a list of items with same div elements and dynamic content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related