Calling method from a Angular 2 class inside template

Question

I have a angular 2 application that has a class called User. This user has a attribute called deleted_at that is either null or contains a datetime, obviously the user is deleted if the deleted_at property isn't null. This is how my user.ts file looks:

User.ts

export class User {     id: number;     email: string;     created_at: string;     first_name: string;     last_name: string;     deleted_at: any;      name() {         if (this.deleted_at === null) {             return this.first_name;         } else {             return 'DELETED';         }     } } 

Now I expected that I could just call name in my template with a simple line:

{{ user.name }} 

This however returns nothing, how can you call certain functions in the angular 2 template? Or isn't this allowed?

Edit: to clear stuff up a bit, this is a class User that I am using in my component user-list.component.ts, multiple users are handled in this component.

Answer 1

Either you call the method like this:

{{user.name()}} // instead of {{user.name}} 

For this approach you need to be aware that you will lose the execution context (this). See this question for more details:

• ng-lightning - data object is undefined on lookup

Or you define your method as a getter so you can use user.name in your template:

get name() {   if (this.deleted_at === null) {     return this.first_name;   } else {     return 'DELETED';   } } 

Answer 2

If the template you are refering to is from your component above you can simple do {{ name() }}. In Angular 2 you dont have to refer to your component first to call methods as it was in Angular 1 the case. In case your class is just a model that you have declared in your componet, you have to get the reference to that model first and then call your method {{ user.name() }}. However, if your method is just a plain getter I would just access a public property instead of calling a method there.