import { ChangeDetectionStrategy , Component } from '@angular/core' ; import { ben , jedi , luke , sith , vader , yoda } from '../constants' ; interface StarWarsChar { readonly name : string ; readonly avatar : string ; readonly jedi : boolean ; } @ Component ( { selector : 'app-star-wars' , templateUrl : './starWars.template.html' , styleUrls : [ './starWars.style.less' ] , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class StarWarsComponent { readonly yoda = yoda ; readonly stringify = ( { name } ) => name ; readonly items : ReadonlyArray < StarWarsChar > = [ { name : 'Luke Skywalker' , avatar : luke , jedi : true , } , { name : 'Obi-Wan Kenobi' , avatar : ben , jedi : true , } , { name : 'Darth Maul' , avatar : '' , jedi : false , } , { name : 'Darth Vader' , avatar : vader , jedi : false , } , { name : 'Mace Windu' , avatar : '' , jedi : true , } , ] ; getInitials ( name ) { return name . split ( ' ' ) . map ( word => word [ 0 ] ) . join ( '' ) ; } getRace ( isJedi ) { return isJedi ? jedi : sith ; } }