Angular looping using *ngFor

Question

I'm a beginner in Angular, I'm developing a website in Angular 8 and i've this in one of my page:

 const gridTableCells = document.querySelectorAll('.grid-table > div'); gridTableCells.forEach((cell) => { const orderNum = cell.getAttribute('order'); (orderNum % 2.== 0) && (cell;className = '--is-striped'); });

 /* Grid Table */.grid-table { width: 100%; border: 0px solid red; margin: 2em 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); grid-template-columns: repeat(3, 1fr); }.grid-table > div { background-color: #fff; border: 1px solid #f2f2f2; padding: 1rem; }.grid-table > div.--is-striped { background-color: #f2f2f2; }.grid-table div.thead { background-color: #eee; font-weight: bold; text-transform: uppercase; }.grid-table div a { margin-right: 1em; }

 <,-- Year-wise Grid Table --> <div class="grid-table"> <div order="1" class="thead">Year</div> <div order="2"><p>2020</p></div> <div order="3"><p>2019</p></div> <div order="4"><p>2018</p></div> <div order="5"><p>2017</p></div> <div order="6"><p>2016</p></div> <div order="7"><p>2010</p></div> <div order="1" class="thead">some text</div> <div order="2"><p>some text</p></div> <div order="3"><p>some text</p></div> <div order="4"><p>some text</p></div> <div order="5"><p>some text</p></div> <div order="6"><p>some text</p></div> <div order="7"><p>some text</p></div> <div order="1" class="thead">Company</div> <div order="2"> <a class="external" href="#">some text</a>, <a class="external" href="#">some text</a>, <a class="external" href="#">some text</a> </div> <div order="3"><a class="external" href="#">some text</a>, <a class="external" href="#">some text</a></div> <div order="4"><a class="external" href="#">some text</a></div> <div order="5"><a class="external" href="#">some text</a></div> <div order="6"><a class="external" href="#">some text</a>, <a class="external" href="#">some text</a></div> <div order="7"><a class="external" href="#">some text</a></div> </div> <!-- /Year-wise Grid Table -->

Now my question is I don't this to be just static in my component.html which produces a Data Table but instead of having a static HTML code, I want to loop it using *ngFor, I don't know how to do it? Any help? or any reference url where i can learn from?

Answer 1

I created a simple Stackblitz for you that uses Angular's Mat Table in the way you wanted your table. Note how I used the ngfor directive for showing links in the company column.

table.html

<div *ngFor="let link of element.company">
    <a href={{link.link}}>{{link.link_text}}</a>
</div>

I'd suggest you to go through the Angular docs for learning new directives or concepts.

Answer 2

You can learn that in angular site: https://angular.io/guide/displaying-data