1

I am working on my portfolio website in Angular 2 and would like to include a skill matrix. this could be any svg image or character, but for testing I use a square provided by font-awesome.

<tbody *ngFor="let skill of skills">
<tr>
     <td>{{skill.name}}</td>
     <td>{{skill.mastering}}</td>
     <td>{{skill.classification}}</td>
 </tr>

skill.mastering is a value from 0 to 10 and the idea is to use <i class="fa fa-square" aria-hidden="true"></i> one time for each number until skill.mastering value is reached. I have no idea how to implement this. In any other language I would write something like this in pseudo:

while skill.mastering > 0
print square
JanVanHaudt
  • 253
  • 1
  • 6
  • 16

2 Answers2

1

You can use this example:

<tbody>
  <tr *ngFor="let skill of skills">
     <td>{{skill.name}}</td>
     <td>
       <i *ngFor="let key of counter(skill.mastering)" class="fa fa-square" aria-hidden="true"></i>
     </td>
     <td>{{skill.classification}}</td>
  </tr>
</tbody>

Add this to your component.ts counter = Array;

Or pick another way how to achieve the same result from here Angular 2 - NgFor using numbers instead collections

Community
  • 1
  • 1
Vojtech
  • 2,756
  • 2
  • 19
  • 29
  • When I run this code I get following error: core.umd.js:3525 EXCEPTION: Error in app/app.component.html:9:13 caused by: self.parentView.context.counter is not a function – JanVanHaudt Feb 05 '17 at 10:18
  • Updated the answer, you need to also declare the counter in your component. – Vojtech Apr 03 '17 at 18:56
1

if i understood your question correctly then i think you are looking for *ngIf. 

 <tbody *ngFor="let skill of skills">
    <tr>
         <td>{{skill.name}}</td>
         <td *ngIf="skill.mastering >0">
           <i class="fa fa-square" aria-hidden="true"></i>{{skill.mastering}}
         </td>
         <td>{{skill.classification}}</td>
     </tr>
 </tbody>

and i think your *ngFor should be on <tr> tag not <tbody> tag

<tbody>
        <tr *ngFor="let skill of skills">
             <td>{{skill.name}}</td>
             <td *ngIf="skill.mastering >0">
               <i class="fa fa-square" aria-hidden="true"></i>{{skill.mastering}}
             </td>
             <td>{{skill.classification}}</td>
         </tr>
</tbody>
Amit kumar
  • 6,029
  • 6
  • 30
  • 40
  • Your answer is correct if you just want to show a square when the value is over 0. The idea is to show (value * squares). so value of 8 would result in 8 squares, 6 in 6 squares. – JanVanHaudt Feb 05 '17 at 10:27
  • @JanVanHaudt then you need nested *ngFor. on second *ngFor which is a number you can use a pipe to create array from number. because *ngFor on number is not supported in angular 2.Just repeat a *ngFor in check this link for how to create array using pipe. http://stackoverflow.com/questions/36535629/repeat-html-element-multiple-times-using-ngfor-based-on-a-number i hope this will help :) – Amit kumar Feb 05 '17 at 12:06