CODEWITHSUNDEEP
angularparent-child
Prashant Raghav
Prashant Raghav

Reputation: 339

How to pass data from child to Parent in Angular 7

I have a ts file app.component.ts which has a boolean variable "flag" , I created a component named dialog , my need is to set the variable from app.component.ts from dialog.ts.

I have seen this is possible by EventEmmitter but somehow that is not working for me.

@Output() selectionDialogEvent=new EventEmitter<boolean>();
this.selectionDialogEvent.emit("true");

In the parent I am trying

getSelectionDialogEvents($event){
    console.log("Event received"+$event);
   this.chat=flag;
  }

Upvotes: 3

Views: 5781

Answers (3)

Muhammad Bilal
Muhammad Bilal

Reputation: 3018

Parent Component Html

<hello (ParentComponet)="ParentComponent($event)"></hello>

Parent Component ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // First Make function

  ParentComponent(data) {
    console.console(data); // this data of child will show in parent console window 
  }
}

Child Component Html

<button type="button" (click)="sendData()">Send Data P to Child</button>

Child Component ts

import { Component , OnInit, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'hello',
  templateUrl:'hello-component.html'
})
export class HelloComponent  implements  OnInit {

  // Pass OutPut and EventEmitter
  @Output() ParentComponet:EventEmitter<any> = new EventEmitter()
  ngOnInit():void{
    
  } 

  // Make A function

  sendData(){
    this.ParentComponet.emit('Send Data Child to Parent')
    //emit is a function and you can pass the value
  }

}

Upvotes: 1

Nicolas Aoki
Nicolas Aoki

Reputation: 78

You have to listen to the event where you're calling the child component. And when the event gets triggered then call your function in your parent component.

<app-child (selectionDialogEvent)=getSelectionDialogEvents($event)></app-child>

where $events will hold the data passed by your emitter selectionDialogEvent

Upvotes: 0

Fernando Zamperin
Fernando Zamperin

Reputation: 460

There are a lot of ways of doing this, one is using providers to share data, see here, but in this particular case I guess this code can help you:

app-parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    Message: {{message}}
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  message:string;

  receiveMessage($event) {
    this.message = $event
  }
}

app-child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
      <button (click)="sendMessage()">Send Message</button>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message: string = "Hello World!"

  @Output() messageEvent = new EventEmitter<string>();

  constructor() { }

  sendMessage() {
    this.messageEvent.emit(this.message)
  }
}

Upvotes: 3

Related Questions