Angular 2 : How to pass function into child component

Question

In an Angular 2 app, say i have a 'SaveComponent' where clicking its save button calls a function isDirty() that returns true or false (true if the content of the parent component has been modified). Note the reason for the 'SaveComponent' is that it has styles and other 'widgets' associated with it that are shared among many components.

currently there is a isDirty function defined in each of the parent components, and the function is passed to SaveComponent as follows inside the parent template:

<save-component [isDirty]="isDirty"> </save-component>

if you care to see, a simplified version of SaveComponent is defined something like this...

import {Component, Input} from 'angular2/core';

@Component({
  selector: 'save-component',
  templateUrl: 'who-cares-to-know.component.html'
})

export class SaveComponent {
  @Input() isDirty;
}

It works only initially. It seems that the isDirty function only returns false (or only called once?) even when the content is modified. Note that the function does work correctly when it's called from the parent component.

What's wrong? Is it possible to pass function from parent to child component via @Input or some other means? Thanks!

Are you doing [(ngModel)]="isDirty" on a textbox or something to update your value? (On the parent component that is) — Mark Pieszak - Trilon.io

Thierry Templier Thierry Templier · Accepted Answer · 2016-05-03T20:10:26

The problem is that you lose the context of your method when referencing it, i.e. the "this" keyword.

I would use something like that:

getIsDirty() {
  return () => {
    return this.isDirty();
  }
}

With the arrow function, you will be able to use the lexical this. The latter corresponds to the component instance itself.

And provide it to the sub component this way:

<save-component [isDirty]="getIsDirty()"> </save-component>

Angular 2 : How to pass function into child component

2 Answers