This document discusses different ways to pass data between Angular components, including @Input, @Output, @ViewChild, and services. @Input passes data from parent to child components via property binding. @Output passes data from child to parent via event binding. @ViewChild allows accessing a child component from the parent after view initialization. Services are singleton objects that share data and logic between components via dependency injection. The document provides code examples for each approach.
2. Petal Diagram Template
Ways to pass data into Components:
Angular
@Input
@Input is a decorator to mark a property as an input. @Input is used to define
an input property, to achieve component property binding. @Input decorator
is used to pass data (property binding) from parent to child component. The
component property should be annotated with @Input decorator to act as
input property.
@Output
@Output decorator is used to pass the data from child to parent component.
@Output decorator binds a property of a component, to send data from one
component to the calling component. @Output binds a property of the type of
angular EventEmitter class.
Mohit Upadhyay
4. Petal Diagram Template
Ways to pass data into Components: @Input()
Angular
child.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<h4><b>Child Component</b></h4>
<h5>My name is <b>{{name}}</b></h5>
`
})
export class ChildComponent implements OnInit {
@Input() name: string;
constructor() { }
ngOnInit(): void {
}
}
parent.component.html
<div>
<h3><b>Parent Component</b></h3>
<app-child [name]="'Mohit'"></app-child>
</div>
This is the data sending
to child component from
parent component
String interpolation to display name that is coming
from parent component
@Input Decorator to pass data from parent to child
component
Denotes those variables which
will be used by child component
with @Input decorator to fetch
the message from parent
component
(@input property name)
Mohit Upadhyay
5. Petal Diagram Template
Ways to pass data into Components: @Output()
Angular
child.component.ts
import { Component, EventEmitter, Output } from
'@angular/core';
@Component({
selector: 'app-child',
template: `<h4><b>Child Component</b></h4>
<button (click)="send()"><b>Click</b></button>`
})
export class ChildComponent {
@Output() username = new EventEmitter<string>();
send() {
this.username.emit('Moh');
}
}
EventEmitter is a module that helps share data between
components using emit() and subscribe() methods.
EventEmitter is in the Observables layer, which
observes changes and values and emits the data to the
components subscribed to that EventEmitter instance.
(click) is event that calling a send function in child ts file
Adding a property with @Output decorator which has a
type of EventEmitter
send() is function that is sending data to parent component
using emit function.
EventEmitter is used with @Output directive to emit custom
events asynchronously and synchronously, and register
handlers for those events by subscribing to an instance.
Mohit Upadhyay
6. Ways to pass data into Components: @Output()
Angular
parent.component.html
<h3>Parent Component</h3>
<app-child (username)="show($event)"></app-child>
<h3><b>{{username}}</b></h3>
parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
username:string;
show(username:string) {
this.username = username;
}
}
(username) is a child component event
show($event) is a function calling when that event is
triggered
display the data that come from child component using
string interpolation
show() function is assigning data to local variable of
parent file
Mohit Upadhyay
7. Petal Diagram Template
Ways to pass data into Components:
Angular
@viewChild
@viewChild decorator help to access a directive, child component and the
DOM element from a component class. The @ViewChild decorator returns the
element that match reference selector for defined directive, template or
component. Using @ViewChild decorator, you can call a child component's
method any time after the child component has got loaded. You can access the
child component 's properties or method or after the "AfterViewInit" method of
the parent component.
Mohit Upadhyay
8. Petal Diagram Template
Ways to pass data into Components: @viewChild()
Angular
parent.component.ts
import { Component, ViewChild, AfterViewInit } from
'@angular/core';
import { Child1Component } from './child/child.component';
@Component({
selector: 'app-view-child',
template:`<p>parent-component!</p>
{{message}}
<app-child1 #child></app-child1>`
})
export class ViewChildComponent implements AfterViewInit
{
@ViewChild('child') private child: Child1Component;
message: string = '';
ngAfterViewInit() {
this.message = this.child.getMessage();
}
}
For ViewChild() to work
Import ViewChild() and ngAfterViewInit() and
implement the lifecycle hook
Import the child component.
Use the @ViewChild() directive.
Declare a variable that holds the data.
In ngAfterViewInit() call the function that holds the
data.
Mohit Upadhyay
9. Petal Diagram Template
Ways to pass data into Components: @viewChild()
Angular
child.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-child1',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class Child1Component {
getMessage() {
console.log("child message");
return "Child component message"
}
}
This is the function we are
calling from parent component
Mohit Upadhyay
10. Petal Diagram Template
Ways to pass data into Components:
Angular
Angular services are objects that get instantiated just once during the lifetime of an
application. They contain methods that maintain data throughout the life of an
application, i.e., data is available all the time.
The main objective of a service is to organize and share business logic, models, or
data and functions with different components of an Angular application. They are
usually implemented through dependency injection.
Angular Services :
Mohit Upadhyay
