Preview:
//problem
@Component({
  template: `
    <p>Welcome {{ fullName() }}!</p>
`
})
export class PersonComponent {  
@Input() person: { firstName: string, lastName: string };  constructor() { }  
fullName() {
    return this.person.firstName + ' ' + this.person.lastName
  }  

}

//solusion
@Component({
  template: `
    <p>Welcome {{  name | nameToString  }}!</p>
`
})
export class PersonComponent {
@Input() person: { firstName: string, lastName: string };  constructor() { }  

}


import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'nameToString'
})
export class IdPathPipe implements PipeTransform {
  transform(value): string {
    return value.firstName = value.lastName
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter