Angular2 component's "this" is undefined when executing callback function

Use the Function.prototype.bind function:

getMessages() {    this.apiService.getMessages(this.gotMessages.bind(this));}

What happens here is that you pass the gotMessages as a callback, when that is being executed the scope is different and so the this is not what you expected.
The bind function returns a new function that is bound to the this you defined.

You can, of course, use an arrow function there as well:

getMessages() {    this.apiService.getMessages(messages => this.gotMessages(messages));}

I prefer the bind syntax, but it's up to you.

A third option so to bind the method to begin with:

export class MainComponent {    getMessages = () => {        ...    }}

Or

export class MainComponent {    ...    constructor(private apiService: ApiService) {        this.getMessages = this.getMessages.bind(this);    }    getMessages(){        this.apiService.getMessages(gotMessages);    }}

Or you can do it like this

gotMessages(messagesFromApi){    let that = this // somebody uses self     messagesFromApi.forEach((m) => {        that.messages.push(m) // or self.messages.push(m) - if you used self    })}

Because you're just passing the function reference in getMessages you don't have the right this context.

You can easily fix that by using a lambda which automatically binds the right this context for the use inside that anonymous function:

getMessages(){    this.apiService.getMessages((data) => this.gotMessages(data));}