Angular4 @Input() to pass value from parent component to child component

Question

I have a code in App component.html like this.

 <form>
        <input #box1 (blur)="onKey1(box1.value)" type="text" name="username">
        <p>{{box1.value}}</p>
    </form>

In AppComponent.ts I have code like this.

import { Component } from '@angular/core';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent{
    type:string;
    constructor() { }
    onKey1(value:string)
    {
        this.type=value;  
    }
}

Now I have created a component named MyComponent3. In that component I want to retrieve the data from app component.The code for MyComponent3.html is as follows:

<p>{{type}}</p>

In MyComponent3.ts I have the following code.

import { Component, OnInit, ViewEncapsulation,Input } from '@angular/core';
@Component({
    selector: 'app-my-component3',
    templateUrl: './my-component3.component.html',
    styleUrls: ['./my-component3.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class MyComponent3Component implements OnInit {
    @Input() type;
    ngOnInit() {
    }
}

But in the Output the value is not getting passed from AppComponent to My Component3.

That is just to test whether the value is getting passed from parent component to child component. If this works I could use it somewhere else in the program — roopteja
– roopteja, Commented Nov 17, 2017 at 11:46
By <app-my-component3></app-my-component3> tag. And this mycomponent3 i am not using anywhere in the program. I used this component to just test wether the input value is getting passed from parent component to child Component. — roopteja
– roopteja, Commented Nov 17, 2017 at 11:52
Try using it like this <app-my-component3 [type]="type"></app-my-component3> — marinvirdol
– marinvirdol, Commented Nov 17, 2017 at 11:58

Sajeetharan · Accepted Answer · 2017-11-17 12:06:26Z

3

Whatever attribute you want to pass to child component should be mentioned in it. You can pass to the child component using @input and the html as follows,

<app-my-component3 [type]="type"></app-my-component3>

answered Nov 17, 2017 at 12:06

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

roopteja Over a year ago

Could you also tell me how to pass a value from child component to parent Component.

Sajeetharan Over a year ago

look here stackoverflow.com/questions/42107167/…

Collectives™ on Stack Overflow

Angular4 @Input() to pass value from parent component to child component

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related