Here we are going
to see how the data will be communicated from parent component to child
component using @Input() method.
@input() can be
used in two ways.
·
Two
way binding with @Input()
· ngOnChange() event and @input()
Here we gonna look
at Two way binding with @Input().
Technical
implementation:
Here we have two component
AppComponent (parent component) ChildComponent ( child component).
App component contains
Textbox, When user enters any of the data, it will be passed to Child component
and display as a span there.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class
AppComponent {
public
inputValue:string;
}
app.component.html
<div style="border: 1px solid chocolate;
height: 250px;
width:
350px; padding: 10px 10px"
>
<span> <b>Parent component</b></span>
<br><br>
Type here : <input type="text"
[(ngModel)]='inputValue'
/>
<br><br>
<child-component [message]='inputValue'></child-component>
</div>
child-component.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'child-component',
templateUrl: './child-component.component.html',
styleUrls: ['./child-component.component.css']
})
export class
ChildComponentComponent {
@Input() message:string;
constructor()
{ }
}
child-component.component.html
<div style="border:1px solid chocolate;
width:300px;
height: 120px; padding: 10px 10px">
<b> Child component</b><br><br>
you entered {{message}}
</div>
Add FormsModule in the
app.module.ts
That's It !!
3 Comments
Thank you for posting themThese articles are exactly what I need.They are my cup of tea. I hope you will add more posts.
ReplyDeletefree game Toon Cup 2017 Game Break The Cup play Battle for the Galaxy
Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info.
ReplyDeletefree kizi Games
Jogo para criança
friv4school 2019
ReplyDeleteYou can contact me for a peaceful time frame, a proper Call Girls in Mahipalpur conference and even an occasion or a capacity; I will take a position right nearby and will complement and improve your area amongst the team. First of all hiring Female Escorts in Gurgaon does not mean you will get infected with immune diseases. Our Agency is a genuine and trusted escort agency and provides a call girl who is educated and well mannered.
Air Hostess Call Girls in Gurgaon
Housewife Call Girls in Faridabad
High Profile Escorts in Agra
Escorts Service in Gurgaon