CODEWITHSUNDEEP
htmlangularlistdynamic
Sasa
Sasa

Reputation: 305

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

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>

Upvotes: 1

Views: 1275

Answers (1)

dev-assassin
dev-assassin

Reputation: 271

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.

Upvotes: 1

Related Questions