D-Net

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

@Component({

    selector: 'showAuthors',

    template: `

        <span *ngIf="authors != undefined">

            <div *ngIf="showAll">

                <a class="uk-text-muted" (click)="showAll = !showAll;">View less authors</a>

            </div>

            <span *ngFor="let item of authors.slice(0,30)">

                  <a href="{{item['url']}}">

                  <!--a routerLinkActive="router-link-active" routerLink="/search/person" [queryParams]="{personId: 'datacite____::9da3a037961b36a634fcd40ab0bf6535'}" -->

                    {{item['name']}};

                </a>

            </span>

            <span *ngIf="!showAll && authors.length > 30">	... </span>

            <span *ngIf="showAll">

                <span *ngFor="let item of authors.slice(30)">

                    <a href="{{item['url']}}">

                        {{item['name']}};

                    </a>

                </span>

            </span>

            <span *ngIf="!showAll && authors.length > 30">

                <a class="uk-text-muted" (click)="showAll = !showAll;">

                    view all {{authors.length}} authors

                </a>

            </span>

            <span *ngIf="showAll">

                <a class="uk-text-muted" (click)="showAll = !showAll;">View less authors</a>

            </span>

        </span>

    `

    })

export class ShowAuthorsComponent {

    @Input() authors: { [key: string]: string }[];

    private showAll: boolean = false;

    constructor () {

        console.info('showAuthors constructor');

    }

    ngOnInit() {

    }

}