All files / src/app/common/list-limiter list-limiter.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
1x
4x
4x
4x
 
1x
2x
 
 
1x
3x
3x
 
1x
 
import { Component, Input, Output, EventEmitter, OnInit, SimpleChange } from '@angular/core';
 
@Component({
  selector: 'mwb-list-limiter',
  template: `
  <li>
    <span class="moreChevron" [ngClass]="{'disabled' : !isMore}">
      <a (click)=showMore() data-toggle="tooltip" [title]="tooltip">
        <i class="fa fa-angle-double-down fa-2x"  aria-hidden="true"></i>
      </a>
    </span>
  </li>
  `,
  styleUrls: ['list-limiter.component.css']
})
export class ListLimiterComponent {
  @Input() listCount: number;
  @Input() numToDisplay: number;
  @Input() displayIncrement = 4;
  @Input() tooltip = 'Show more';
  @Output() numDisplayed = new EventEmitter();
 
  get isMore() {
    return this.numToDisplay < this.listCount;
  }
 
  showMore() {
    this.numToDisplay += this.displayIncrement;
    this.numDisplayed.emit(this.numToDisplay);
  }
}