Pass a variable from child to parent component

[Maureen Moore]

So I am trying to get a value from my child component to print in my parent component and I tried the following:

In my child component ts:

export class ChildComponent  {
 message: string = 'Hello!!!';
}

 In my parent component ts:

import { Component, ViewChild, AfterViewInit} from '@angular/core';
import { ChildComponent } from '../child/child.component'


 export class ShoppingCartComponent implements ControlValueAccessor, AfterViewInit  {
  messageFromChild : string;
  @ViewChild(ChildComponent) myChild;
  ngAfterViewInit() {
    this.messageFromChild = this.myChild.message;
  }
  }

  

 In my parent component html:

  <h1> From Child - {{ messageFromChild }}  </h1>

 I don't get any errors but {{ messageFromChild }} is blank.

[Maureen Moore]

 The tutorial that I followed said to add the parent component to the bootstrap array in app.module.ts but when I did that I got a blank page.

[maninder singh Kumar]

Have tried loading the result into console.log ?  Normally gives a better understanding.

Maninder Kumar about.me/maninder.s.kumar

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/ffc8ca20-d4b0-4894-bc4c-f8316c90e69eo%40googlegroups.com.

[Maureen Moore]

 In the console, I get the error:  TypeError: Cannot read property 'message' of undefined

[Sriram V]

Child to parent should occur via event emitter

Sent from BlueMail

[Maureen Moore]

I got it to work using eventemitter but now the problem is that I need to use a number as an eventemitter and I get the error: Type 'number' is not assignable to type 'EventEmitter<number>'

[Sriram V]

What are you trying to pass back to the parent? You have to use the emit function on the property and receive the event in the parent.

Sent from BlueMail

[bastien lemaire]

Hi.

This is quite uncommon for a child component to pass a static string to its parent. My guess is that the message is going to be edited or changed overtime.. in which case the child should emit the new value when it changed (via the @Output decorator and an eventEmitter)

If that's not the case would you mind explaining what is really needed here, please?

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/CABOHK3RCb2ZR_PgRNnbOB7hTg%3DEtLCzYjbvc%3DByHCGsO_71Ytg%40mail.gmail.com.

[Maureen Moore]

I simply circumvented the whole issue by merging my two controllers into one.

On Sunday, July 5, 2020 at 5:10:40 AM UTC-4, bastien lemaire wrote:

Hi.

This is quite uncommon for a child component to pass a static string to its parent. My guess is that the message is going to be edited or changed overtime.. in which case the child should emit the new value when it changed (via the @Output decorator and an eventEmitter)

If that's not the case would you mind explaining what is really needed here, please?

To unsubscribe from this group and stop receiving emails from it, send an email to ang...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/ffc8ca20-d4b0-4894-bc4c-f8316c90e69eo%40googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.

To unsubscribe from this group and stop receiving emails from it, send an email to ang...@googlegroups.com.