Geek Answers Handbook

Angular 2: How to pass a function to a child component

In an Angular 2 application, let's say I have a “SaveComponent” where clicking on its save button calls a function isDirty()that returns true or false (true if the contents of the parent component has been changed). Note that the reason for SaveComponent is that it has styles and other related widgets that are shared by many components.

There is currently a function isDirtydefined in each of the parent components, and the function is passed in SaveComponentas follows inside the parent template:

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

if you want to see, the simplified version is SaveComponentdefined 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;
}

. , isDirty false ( ?), . , .

? @Input - ? !

+4
1

, , .. "this".

- :

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

. .

:

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

More articles:


All Articles