Angular 4 call parent method in a child component

Question

I want to call parent method (deletePhone) in child component in Angular 4. How can I do that properly?

my parent component looks like:

export class ContactInfo implements OnInit {
    phoneForm: FormGroup;
    phones: Phone[];


    constructor(private fb: FormBuilder,
            private userService: UserService) {
    }

    ngOnInit() {
        this.userService.getDataPhones().subscribe(
            phones => {
                this.phones = phones;
            });

        this.phoneForm = this.fb.group({
            phone: ['', [Validators.pattern(PHONE_PATTERN)]]
        });
    }

    deletePhone(phone: Phone) {
        this.userService.deleteUserPhone(phone)
            .subscribe(res => {
                let index = this.phones.indexOf(phone);
                if (index > -1) {
                    this.phones.splice(index, 1);
                }
        });
    }
}

Have you considered using a service for this type of functionality? — theTechRebel, Sep 29 '18 at 22:43

score 172 · Accepted Answer · edited Mar 24 '20 at 15:39

172

import { Output, EventEmitter } from '@angular/core'; 

...

class ChildComponent {
  @Output() someEvent = new EventEmitter<string>();

  callParent(): void {
    this.someEvent.next('somePhone');
  }
}

In ContactInfo's template

<child-component (someEvent)="deletePhone($event)"

edited Mar 24 '20 at 15:39

andy

129
3
12

answered Apr 10 '17 at 12:35

Günter Zöchbauer

623,577
216
2,003
1,567

3

You can add the intended type like "new EventEmitter()" :) – Nicolas Jul 26 '17 at 08:01
13

For begginers, you need to add "import { Output, EventEmitter } from '@angular/core' " – Sergey_T Nov 20 '18 at 09:18
11

It's not just beginners, The answer is incomplete. The answer should be edited to include Sergey's addendum. – Manuel Hernandez Dec 30 '18 at 13:49
2

I don't see why every single answer would need to list imports. You can look them up in the Angular docs. **Everything** that's not declared in the current file needs to be imported. – Günter Zöchbauer Dec 30 '18 at 13:51
28

for no other reason than being thorough and helpful. – Manuel Hernandez Dec 30 '18 at 14:31
1

also because sometimes there are several options when importing, and it can be confusing – Sofía Jul 14 '20 at 15:11
2

I think someEvent.emit() is preferred, and .next() is deprecated. https://stackoverflow.com/questions/35840576/difference-between-eventemitter-next-and-eventemitter-emit-in-angular-2 – John H Jan 19 '22 at 16:14

score 23 · Answer 2 · edited Jun 20 '18 at 15:48

This worked for me (example from official docs):

https://angular.io/api/core/EventEmitter#examples

Child:

@Component({
  selector: 'zippy',
  template: `
  <div class="zippy">
    <div (click)="toggle()">Toggle</div>
    <div [hidden]="!visible">
      <ng-content></ng-content>
    </div>
 </div>`})
export class Zippy {
  visible: boolean = true;
  @Output() open: EventEmitter<any> = new EventEmitter();
  @Output() close: EventEmitter<any> = new EventEmitter();

  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.open.emit(null); //emit event here
    } else {
      this.close.emit(null);
    }
  }
}

Parent:

<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>

score 15 · Answer 3 · edited Jul 24 '20 at 21:25

I don't like boilerplate code like @Output(). I found another solution, just pass object with any number of anonymous functions

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  styleUrls: ['./parent.component.css'],
  template: `
  <app-child [parentApi]="getParentApi()"></app-child>
`,
})
export class ParentComponent implements OnInit {

  getParentApi(): ParentComponentApi {
    return {
      callParentMethod: (name) => {
        this.parentMethod(name)
      }
    }
  }

  constructor() { }

  ngOnInit() {
  }

  parentMethod(name: string) {
    console.log(`Hello ${name} from parent`)
  }
  
}

export interface ParentComponentApi {
  callParentMethod: (string) => void
}

And child:

import { Component, OnInit, Input } from '@angular/core';
import { ParentComponentApi } from '../parent/parent.component';

@Component({
  selector: 'app-child',
  template: `<button (click)="callParent()">call parent</button>`,
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() parentApi: ParentComponentApi

  constructor() { }

  callParent() {
    this.parentApi.callParentMethod("child")
  }

  ngOnInit() {

  }

}

I think this is pretty safe to do this way, no?

I like the idea of this. Unfortunately doesn't work in Angular 7. Gives a template parse error. — Jans Rautenbach, Nov 02 '18 at 21:53
`@Output` is not boilerplate, if you are considering `@Input`. They both have different aspects in parent-child relationship. we can not replace them with one another. — Ram, Dec 01 '20 at 03:16
i also do prefer this solution, it is easier to understand and implement especially when you function has multiple params. for the `@Output` way of doing you have to drastically change the way your method is implemented to do the same job — Big Zed, Oct 28 '21 at 12:14

Iceberg · Answer 4 · 2021-08-30T11:46:48.187

It's simpler than you might think. The key is to pass a parent method to a child @Input property. test it online

Parent component

@Component({
  selector: 'my-app',
  template: `
    <h1>Parent:</h1>
    <p>Parent counting: {{this.count}}</p>

    <child-comp [childInc]="this.inc"></child-comp>
  `
})
export class AppComponent {
  name = "I'm Parent";

  count = 0;

  inc = () => {
    this.count++;
  }
}

Child component

@Component({
  selector: 'child-comp',
  template: `
  <h1>Child:</h1> 
  <button (click)="childInc()">Click me!</button>
  `
})
export class ChildComponent  {
  name = "I'm child"

  @Input() childInc: () => void
}

I've used inc = () => {...} notion in parent, which can remember the right this. If you use the inc(){...} notion, then you need to bind parent this as [childInc]="this.inc.bind(this)".

@amirkian Try to introduce a new function in `ChildComponent` like `(click)="newFunc()"`, and in this newFunc() call the childInc() with parameter. — Iceberg, Aug 09 '22 at 14:52

Angular 4 call parent method in a child component

4 Answers4

Parent component

Child component

Linked

Related