I have the following class in an Angular2 app
export class Contact { constructor( public has_reply: boolean, public archived: boolean ) { } getStatus() : string { if (this.archived) { return "Archived"; } if (this.has_reply) { return "Answered"; } return "Waiting"; } } which is returned by a service
@Injectable() export class ContactsService { private contactsData : BehaviorSubject<Array<Contact>> = null; constructor(private http: Http) { this.contactsData = new BehaviorSubject<Array<Contact>>([]); } /** * get the list of contacts */ populateContacts() : Array<Contact> { return this.http.get('/api/contacts/').map( (res: Response) => {return res.json()} ).subscribe( jsonData => { this.contactsData.next(<Array<Contact>> jsonData); } ); } onContactsChanged() : Observable<Array<Contact>>{ return this.contactsData.asObservable(); } } which is used in a component
@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { private contacts: Array<Contact> = []; constructor( private contactsApi : ContactsService ) { } ngOnInit() { this.contactsApi.onContactsChanged().subscribe( (contacts: Array<Contact>) => {this.contacts = contacts;} ); this.contactsApi.populateContacts(); } } and displayed in a template
<table class="table table-striped table-bordered"> <tr *ngFor="let contact of contacts"> <td> {{ contact.getStatus() }} </td> </tr> I get the following error
EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:11:8 caused by: self.context.$implicit.getStatus is not a function What is wrong in my approach? Does Angular2 allow to call a class method like this?
Note : Calling method from a Angular 2 class inside template looks similar question but it did not help