I'm building a simple web based application using angular version 6.

In my application there is a ponent which has a child ponent. There is a function in this ponent(In the parent ponent, not the child ponent.) and I want to invoke that function using a button which is in the child ponent.

This image explains the format of my ponents.

I think its regarding to angular @Output. But i can't manage it.

This is how my code has organized.

Parent Component - ponent.ts file

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

@Component({
  selector: 'app-teacher-home',
  templateUrl: './teacher-homeponent.html',
  styleUrls: ['./teacher-homeponent.scss']
})
export class TeacherHomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  formView: boolean = false;

  toggleForm(){
    this.formView = !this.formView;
  }
}

Parent ponent - ponent.html file

<div>
    <child-pnent></child-pnent>
</div>

Child ponent - ponent.html file

<div>
    <button>Toggle Form view</button>
</div>

i want to callthe function toggleForm() of parent ponent when the button clicked which is in child ponent.

I'm building a simple web based application using angular version 6.

In my application there is a ponent which has a child ponent. There is a function in this ponent(In the parent ponent, not the child ponent.) and I want to invoke that function using a button which is in the child ponent.

This image explains the format of my ponents.

I think its regarding to angular @Output. But i can't manage it.

This is how my code has organized.

Parent Component - ponent.ts file

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

@Component({
  selector: 'app-teacher-home',
  templateUrl: './teacher-home.ponent.html',
  styleUrls: ['./teacher-home.ponent.scss']
})
export class TeacherHomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  formView: boolean = false;

  toggleForm(){
    this.formView = !this.formView;
  }
}

Parent ponent - ponent.html file

<div>
    <child-pnent></child-pnent>
</div>

Child ponent - ponent.html file

<div>
    <button>Toggle Form view</button>
</div>

i want to callthe function toggleForm() of parent ponent when the button clicked which is in child ponent.

• javascript
• angular
• typescript
• ponents

Share Improve this question Follow edited Oct 1, 2019 at 10:06 Buddhika Chathuranga asked Oct 31, 2018 at 12:31 Buddhika ChathurangaBuddhika Chathuranga 1,46822 gold badges1515 silver badges2323 bronze badges 1

• Check Angular documentation, specifically section on Component Interaction. Also, do some research before asking, a single search would have returned bunch of answers that cover your use case... – miselking Commented Oct 31, 2018 at 12:41

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

read this article: Understanding @Output and EventEmitter in Angular

child ponent:

@Component({
  selector: 'app-child',
  template: `<button (click)="sendToParent('hi')" >sendToParent</button> `
})
export class AppChildComponent {
  @Output() childToParent = new EventEmitter;

  sendToParent(name){
    this.childToParent.emit(name);
  }
}

parent ponent:

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: [ './app.ponent.css' ]
})
export class AppComponent  {
  toggle(){
    console.log('toggle')
  }

}

parent html:

<app-child (childToParent)="toggle($event)"></app-child>

working DEMO

You have a couple of ways to do this :

1. Is to create an event inside the child ponent and then give it a callback, something like this:

   @Output('eventName') buttonPressed = new EventEmitter();

and call buttonPressed.emit() when you want the event to be triggered

on the parent side it will look like this :

<div>
    <child-pnent (eventName)="toggleForm()"></child-pnent>
</div>

2. Another way is to create a shared service that will contain the shared functions and data for both ponents

You need to use @Output decorator inside your child ponent and emit an event when the button present clicked inside your child.

For eg: -

Child ponent.html

<div>
    <button (click)="childButtonClicked()">Toggle Form view</button>
</div>

Child ponent.ts

export class ChildComponent {
  @Output triggerToggle: EventEmitter<any> = new EventEmitter<any>();

  ...
   childButtonClicked() {
     this.triggerToggle.emit(true);
   }
  ...
}

Parent Component

<div>
    <child-pnent (triggerToggle)="toggleForm()"></child-pnent>
</div>

You can use EventEmitter of angular to listen to events from your child ponent.

parent.ponent.ts

toggleForm($event) {} 

parent.ponent.html

<div>
    <child-pnent  (trigger)="toggleForm($event)" ></child-pnent>
</div>

child.ponent.ts

@Output() trigger : EventEmitter<any> = new EventEmitter<any>();

buttonClick(){
  this.trigger.emit('click');
}