type-ref.component.ts

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

import {Type} from './type';
import { MemberFilterService } from './member-filter.service';

@Component({
  selector: 'type-ref',
  styles: [`
    .sep {
      display: inline;
      margin-right: .3em;
    }
    .usertype {
      color: #8c1339;
      text-decoration: none;
    }
    .non-usertype {
      color: #444;
    }
  `],
  template: `<a *ngIf="type.id; else elseBlock" class="usertype" [routerLink]="['/type', type.id]" (click)="onClick()">{{getName()}}</a><!--
  --><ng-template #elseBlock><span class="non-usertype">{{getName()}}</span></ng-template><!--
    --><ng-container *ngIf="type.args && !name"><!--
      -->&lt;<ng-container *ngFor="let arg of type.args; let isLast=last"><type-ref [type]="arg"></type-ref><div *ngIf="!isLast" class="sep">,</div></ng-container>&gt;<!--
    --></ng-container>`
})
export class TypeReferenceComponent {
  @Input() type : Type;
  @Input() name : string;
  @Input() filter : string;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver,
    private memberFilterService: MemberFilterService) { }

  getName(): string {
    if (this.name) {
      return this.name;
    } else {
      return this.type.name;
    }
  }

  onClick() {
    if (this.filter) {
      this.memberFilterService.setFilter(this.filter);
    }
  }
}