Calling method from a Angular 2 class inside templ

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.