D-Net

import {Component, Input} from '@angular/core';

import {HelperFunctions} from "../../utils/HelperFunctions.class";

@Component({

  selector: 'relatedTo',

  template: `

    <div class="uk-text-muted">Communities</div>

    <div class="uk-margin-small-left" *ngFor="let item of contexts.slice(0, showNum); let i=index">

        <span>

          <span>{{item['labelContext']}}</span>

          <span *ngIf="item['labelCategory']"><span

              uk-icon="icon: arrow-right"></span>{{item['labelCategory']}}</span>

          <span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>

        </span>

    </div>

    <div *ngIf="showNum > threshold" class="uk-text-right">

      <a (click)="showNum = threshold; scroll()">

        View less

      </a>

    </div>

    <div *ngIf="showNum == threshold && contexts && contexts.length > threshold" class="uk-text-right">

      <a (click)="showNum = contexts.length;">

        View more

      </a>

    </div>

  `

})

export class RelatedToComponent {

  @Input() contexts: { "labelContext": string, "labelCategory": string, "labelConcept": string }[];

  public threshold: number = 5;

  public showNum: number = 5;

  constructor() {

  }

  ngOnInit() {

  }

  public scroll() {

    HelperFunctions.scroll();

  }

}