How to print parent value inside child component in angular 4

Question

I am new in angular4

I have an Registration process which contains multiple steps, So I am just hide/showing my steps of the basis of some conditions. So, Registration process contains parent and child component("sidebar" that show the value that user filled in last step).

I am passing a array from parent to child. And in each step I am updating my array with some values. When I'm printing my array in child HTML its working fine but when I trying to console the same array in child compenent.ts its showing nothing. I have to do some calculation like in my arary I have date of birth so I want to calculate the actual age of user and show the same on sidebar.

This is my array: MyArray This is how I am passing my array

Parent.html

<app child [MyArray]="MyArray"></app child>

ChildComponent.ts

import { Component, OnInit,Output,Input } from '@angular/core';
export class SidebarComponent implements OnInit {
     @Input() MyArray: string;

     ngOnInit() {
     console.log(this.MyArray,'ssss');     
}
}

If I use MyArray.email in my child.html then Its showing the value fine.

Anyone having any Idea What I am doing wrong here

I wonder how it works when you put Myarray.email where MyArray is a string — Sajeetharan
– Sajeetharan, Commented Feb 17, 2018 at 9:46
You can omit ":string" if you want. You don't have to declare it. Or you can declare as array as well. — Andrew Howard
– Andrew Howard, Commented Feb 17, 2018 at 9:49

Sajeetharan · Accepted Answer · 2018-02-17 10:06:27Z

3

If you are passing an array from your parent component to child, your input must be declared as array in your child component , if you really not sure about the type , you can put it as any

  @Input() MyArray: Array<any>;

and you can access the particular property using the index or using ngFor in the template

console.log(this.MyArray[0].email);

if you need to watch for the changes on array, you can use ngOnChanges

Respond when Angular (re)sets data-bound input properties...Called before ngOnInit() and whenever one or more data-bound input properties change.

ngOnChanges(changes) {
    // code here
}

edited Feb 17, 2018 at 10:06

answered Feb 17, 2018 at 9:55

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

9 Comments

Rahul Over a year ago

ok, but my question is at any point if my array is update then how can I get the array value in child component. Right now I am able to get the value in child HTML but not in component

Rahul Over a year ago

Inside ngOnInit() I am consoling the array, But its showing nothing.

Sajeetharan Over a year ago

it should be available in the component as well. can you produce a demo

Sajeetharan Over a year ago

ngOnInit gets called only when the component gets called, so if you are looking for updated value it wont be there

Rahul Over a year ago

Yes, That is my question how can I get the update value everytime?

|

Collectives™ on Stack Overflow

How to print parent value inside child component in angular 4

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related