D-Net

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

@Component({

  selector: 'showSubjects',

  template: `

    <div *ngIf="classifiedSubjects && classifiedSubjects.size > 0" class="uk-text-small">

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

        Subjects

      </div>

      <div class="uk-margin-small-top">

        <div *ngFor="let key of getKeys(classifiedSubjects)" style="line-height: 20px">

          <span uk-icon="tag"></span>

          <span class="uk-text-bold uk-text-uppercase"> {{key}}: </span>

          <ng-container *ngFor="let subject of classifiedSubjects.get(key)">

            <span class="uk-display-inline-block label-classified">{{subject}}</span>

          </ng-container>

        </div>

      </div>

    </div>

    <div *ngIf="(subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0)" class="uk-text-small uk-margin-small-top"

      [class.uk-margin-top]="classifiedSubjects && classifiedSubjects.size > 0">

      <span *ngIf="subjects && subjects.length > 0">{{subjects.join(', ')}}</span>

      <span *ngIf="(subjects && subjects.length > 0) && (otherSubjects && otherSubjects.size > 0)">, </span>

      <span *ngIf="otherSubjects && otherSubjects.size > 0">

        <span *ngFor="let key of getKeys(otherSubjects); let i=index">

          <span *ngIf="otherSubjects.get(key).length > 0">

            <span>{{otherSubjects.get(key).join(', ')}}</span>

            <span *ngIf="i < (otherSubjects.size - 1)">, </span>

          </span>

        </span>

      </span>

    </div>

  `

})

export class ShowSubjectsComponent {

  @Input() subjects: string[];

  @Input() otherSubjects: Map<string, string[]>;

  @Input() classifiedSubjects: Map<string, string[]>;

  // private showClassifiedSbj: boolean = false;

  constructor() {

  }

  ngOnInit() {

  }

  public getKeys(map) {

    return Array.from(map.keys());

  }

}