call a method inside a ngFor in my html (angular6)

user_10529481 0
Viewed 5384

I'm new to stackOverflow, couldn't find an answer to my question. I'm trying to use an ngFor inside an ngFor. Is it possible to call a method inside an *ngFor: something like this : 

    <div *ngFor="let nbStar of myMethod(skill.level)">

where myMethod is using data from my first ngFor as parameter to generate an array of numbers.

my code:

<div *ngFor="let skill of skills">
        <div class="picture">
            <img src="{{skill.skillPicture}}"/>
        </div>  
      <div class="title-skill">
        <h3>{{skill.skillName | uppercase}} </h3>
        Niveau: 
        <div *ngFor="let nbStar of generateStarsArray(skill.level)">
           <i class="fas fa-star"></i>
        </div>
  </div>
</div>

Thanks a lot for any clues.

ngfor angular6
1 Answers

Yes you could use it. but make sure your method returns always an array.

For the following template

<div *ngFor="let skill of skills">
    <div class="picture">
        <img src="{{skill.skillPicture}}"/>
    </div>  
  <div class="title-skill">
    <h3>{{skill.skillName | uppercase}} </h3>
    Niveau: 
    <div *ngFor="let nbStar of generateStarsArray(skill.level)">
       <i class="fas fa-star"></i>
    </div>
  </div>
</div>

in component.ts method generateStarsArray should be something like below

 public generateStarsArray(level): Array<any> {
     let stars = [];
     //---> some logic
     return stars;
 }
user_24933220
Related