<div class="card">
  <div class="card-title">
    <div [class]="component.catagory == 'ui' ? 'frontend' : 'backend'">
      <img src="{{imageUrl}}assets\img\employee\wizard\backen_component.png" alt="" width="19" height="19">
    </div>
    <div>
      <span [title]='component.name'>{{component.name}}</span>
    </div>
  </div>
  <div class="card-content">
    <p [title]='component.desc'>{{component.desc}}</p>
  </div>
  <hr>
  <div class="card-footer">
    <div>
      <mat-icon class="star-icon">star</mat-icon>
      <mat-icon class="star-icon">star</mat-icon>
      <mat-icon class="star-icon">star</mat-icon>
      <mat-icon class="star-icon">star</mat-icon>
      <mat-icon class="star-icon">star_half</mat-icon>
    </div>
    <div>
      <i class="glyphicon glyphicon-download-alt" aria-hidden="true"></i>
      <span>435</span>
    </div>
  </div>
</div>
