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()
· One way binding using ngOnChange() event and @input()
Here we gonna look at one way binding with ngModelChange 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.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public inputValue : string;
onChange(UpdatedValue : string) :void
{
this.inputValue = UpdatedValue;
}
}
app.component.html
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
Add FormsModule in the app.module.ts
That's It !!
3 Comments
You must be a kind people because you share your knowledge through articles.I have read all your articles. I really like them. It's very kind of you to share your insight.They give me effective tips.
ReplyDeleteplay Battle for the Galaxy Break The Cup For Free free game Toon Cup 2017
Great Article
DeleteFinal Year Projects for CSE in Angular
Angular Training in Chennai
Project Centers in Chennai
JavaScript Training in Chennai
Fantastic blog.Really thank you! Cool.Fantastic post.Your article is very nice thank you for share this such a wonderful article. This is a very nice blog that I will definitely come back to more times this year! They have lots of knowledge and tips.
ReplyDeletekizi kizi 2 games
friv jogo
friv 4 school