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: From Child - {{ messageFromChild }} I don't get any errors but {{ messageFromChild }} is blank.

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 '

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

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.

Answers

Pass a variable from child to parent component

Maureen Moore

508

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;
}
}