opt-cc/static/src/app/ranks/rank-list/rank-item.component.ts

import {ChangeDetectionStrategy, Component, EventEmitter} from '@angular/core';
import {Rank} from '../../models/model-interfaces';
import {Fraction} from '../../utils/fraction.enum';

@Component({
  selector: 'pjm-rank-item',
  templateUrl: './rank-item.component.html',
  styleUrls: ['./rank-item.component.css', '../../style/list-entry.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  inputs: ['rank', 'selected'],
  outputs: ['rankSelected', 'rankDelete'],
})
export class RankItemComponent {

  selected: boolean;
  rank: Rank;
  imageSrc;

  rankSelected = new EventEmitter();
  rankDelete = new EventEmitter();

  readonly fraction = Fraction;

  constructor() {
  }

  ngOnInit() {
    this.imageSrc = 'resource/rank/' + this.rank._id + '.png?' + Date.now();
  }

  select() {
    this.rankSelected.emit(this.rank._id);
  }

  delete() {
    this.rankDelete.emit(this.rank);
  }

}