D-Net

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

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

@Component({

  selector: 'relatedTo',

  template: `

    <div class="uk-margin-bottom">

      <div class="uk-text-small">

        <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 *ngIf="!item['inline']">

            <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>

          <mark *ngIf="item['inline']">

            <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>

          </mark>

        </div>

      </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>

    </div>

  `

})

export class RelatedToComponent {

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

  public threshold: number = 5;

  public showNum: number = 5;

  constructor() {

  }

  ngOnInit() {

  }

  public scroll() {

    HelperFunctions.scroll();

  }

}