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.

Thierry Templier · Accepted Answer · 2017-06-08 06:07:19Z

22

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'; } }

edited Jun 8, 2017 at 6:07

answered May 23, 2016 at 7:57

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

hY8vVpf3tyR57Xib Over a year ago

Thanks for your answers, I'm still not there yet though. When I define the getter like you suggested I get a TS error that says: '=' expected, do you know if there is something wrong in the syntax?

Thierry Templier Over a year ago

Mum strange. See this plunkr: plnkr.co/edit/Twhqy3uKbvALwTrjJh0j?p=preview. It works for me. Any difference with what you tried?

hY8vVpf3tyR57Xib Over a year ago

Ah the typescript error was just a syntax problem. The main difference with your plunker and my example is that in my example I loop over a list of users in my template with: *ngFor="let user of users", and for each entry I call user.name. This returns an empty string, could that be because the template doesn't recognise that this is a User class object?

hY8vVpf3tyR57Xib Over a year ago

I think you wanted to include a link, but I can't see it!

martinoss Over a year ago

shouldn't it be get name()?

|

LordTribual · Accepted Answer · 2016-05-23 08:05:23Z

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.

Collectives™ on Stack Overflow

Calling method from a Angular 2 class inside template

2 Answers 2

9 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Linked

Related