Angular 6 Communicating between Parent&Child components using @Output

Question

I am working on an Angular 6 project.

I need to communicate between parent and child components(from parent to child) but actually by using @Output I could not achieve this.

Please help me regarding the below codes.

child component:survey.component.html

<div style="text-align:center"> <app-root (numberGenerated)='selectValue($event)'></app-root> survey.component.ts

import { Component, OnInit, SkipSelf , Input, Output , EventEmitter} from '@angular/core';
import { AppComponent } from '../parent/app.component'

@Component({
selector: 'app-survey',
templateUrl: './survey.component.html',
styleUrls: ['./survey.component.css']
})
export class SurveyComponent implements OnInit {

selectValue( newValue : any ) {
 console.log(newValue);
}
constructor(){}

ngOnInit() {
}

}

parent component: app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'BegumSurvey';

@Output() private numberGenerated = new EventEmitter<number>();

 public generateNumber() {
   const randomNumber = Math.random();
   this.numberGenerated.emit(randomNumber);
 }

 constructor(){
 }
 ngOnInit() {

 }
 }

app.component.html

<button class="btn" (click)="generateNumber()">Fire event!</button>

Could you please help me to understand why even 'Fire event!' is not printed?

Thanks much.

Any help is appreciated.

Begum

That should work, but I'm confused... seems survey component is the parent, and app component is the child. In your question you are saying otherwise. — AVJT82
– AVJT82, Commented Mar 8, 2019 at 17:06

Chandana · Accepted Answer · 2019-03-08 17:51:58Z

1

If you want to pass data from the parent component to the child component, then you need to use @Input decorator alone with property binding. Below is the sample code base on your clarification.

survey-child.component.ts

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

@Component({
  selector: 'app-survey-child',
  templateUrl: './survey-child.component.html',
  styleUrls: ['./survey-child.component.css']
})
export class SurveyChildComponent implements OnInit {
  @Input() surveyChildValue: string;
  public testValue: string;

  constructor() { }

  ngOnInit() {
    this.testValue = this.surveyChildValue;
    this.selectValue();
  }

  selectValue() {
    console.log(this.surveyChildValue);
    
  }

}

survey-parent.component.ts

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

@Component({
  selector: 'app-survey-parent',
  templateUrl: './survey-parent.component.html',
  styleUrls: ['./survey-parent.component.css']
})
export class SurveyParentComponent implements OnInit {
  parentValue: string = 'Angular 6 Communicating between Parent&Child components using @Input';
  constructor() { }

  ngOnInit() {
  }

}

survey-child.component.html

<!--This will print the Value you assignned in Parnet in UI as we use interpretation -->
<p>
  {{testValue}}
</p>

survey-parent.component.html

<app-survey-child [surveyChildValue]="parentValue"></app-survey-child>




app.component.html
<router-outlet>
  <app-survey-parent></app-survey-parent>

</router-outlet>

enter image description here

answered Mar 8, 2019 at 17:51

Chandana

1225 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Begumm Over a year ago

Hello. Thanks for the answer.

Begumm Over a year ago

However, I have a question that console.log(this.surveyChildValue) is 'undefined'. Could you please help me about the reason. Thanks.

Chandana Over a year ago

Did you pass the parentValue in CSS Selector as below. <app-survey-child [surveyChildValue]="parentValue"></app-survey-child>. Basically parentValue variable is passing to child component when you declare the selector in Template. Also you have to use the same variable name which is surveyChildValue

Begumm Over a year ago

Do I need to use a service?

Chandana Over a year ago

Nop. No Service is require. The intention of Services are to make HTTP calls to bring data in from your Rest API. Kindly send me the code. It works find for me and i have attached the screenshot in my Answer .

|

Vadim · Accepted Answer · 2019-03-08 17:16:39Z

0

I need to communicate between parent and child components(from parent to child) but actually by using @Output I could not achieve this.

@Output is for child-to-parent interaction. What you need is to use @Input (parent-to-child interaction):

Parent component(app.ts):

this.numberGenerated = Math.random();

Parent component(app.html):

<app-survey [newValue]="numberGenerated"></app-survey>

Child component(survey.component.ts):

import { Component, OnInit, SkipSelf , Input, Output, Input, EventEmitter} from 
'@angular/core';
import { AppComponent } from '../parent/app.component'

@Component({
  selector: 'app-survey',
  templateUrl: './survey.component.html',
  styleUrls: ['./survey.component.css']
})
export class SurveyComponent implements OnInit {

  @Input() newValue;
  ...

@Output is the child's EventEmitter property. More is here: Angular component interaction

edited Mar 8, 2019 at 17:16

answered Mar 8, 2019 at 17:09

Vadim

3,4492 gold badges16 silver badges30 bronze badges

3 Comments

AVJT82 Over a year ago

But according to OP's code, app component is the child here. Says op has in survey component the tag: <app-root (numberGenerated)='selectValue($event)'></app-root> Therefore I'm confused :D

Vadim Over a year ago

@AJT_82 he stated in question that survey component is a child of app component. But by code, yes, it's like you said. Though the OP's statement (from parent to child) but actually by using @Output is not right, because @Output is a decorator for child event emitter property.

Begumm Over a year ago

Hi both. Thanks for the remark. I am trying to understand the input output components so maybe I wrote it wrong :)

Chandana · Accepted Answer · 2019-03-08 19:23:01Z

0

With @Output and EventEmitter it is the other way around. You can pass data back from the child to the parent component. Again in the child, we declare a variable but this time with the@Output decorator and a new EventEmitter

answered Mar 8, 2019 at 19:23

Chandana

1225 bronze badges

Collectives™ on Stack Overflow

Angular 6 Communicating between Parent&Child components using @Output

3 Answers 3

13 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related