Sharing Data Between Angular Components

Sharing Data Between
Angular Components
Akhil K • 28.03.2019

Overview
Basic concepts of Angular
● Components and Services
● Binding and Interpolation
● How to load components
● Using directives
Sharing data between components
● Parent to child
● Child to parent
● Unrelated components

Components and Services
Components
● A component is just a class that
serves as a controller for the user
interface.
● It consists of three parts - some
TypeScript code, an HTML template,
and CSS styles.
Services
● You can use services to organize and
share code and data across your
app.

Examples
import { Component} from '@angular/core';
@Component({
selector: 'some-component,
templateUrl: 'some-component.html',
styleUrls: ['some-component.css'],
})
export class SomeComponent {
}
import { Injectable } from
'@angular/core';
@Injectable()
export class SomeService {
}

Binding and Interpolation
Binding
● Binding is just a way to connect data
from the TypeScript code to the
HTML.
● We can bind to attributes using
square brackets [ ]. We can also bind
to events using ( ) parenthesis.
Interpolation
● Interpolation refers to embedding
expressions into marked up text.
● We can also interpolate values from
the TypeScript using handlebars
syntax.

Examples
@Component(...)
clicked = false;
handleClick() {
this.clicked = true;
}
}
<button [disabled]="clicked"
(click)="handleClick()"></button>
@Component(...)
appName = 'Cool App';
}
<h1>{{ appName }}</h1>

How to load components
● Declare the components in the
HTML.
● Example:
○ <app-cool></app-cool>
● Load the component with the router.
This tells Angular to imperatively
load the component when you
navigate to http://localhost:4200/cool.
● Example:
○ const routes: Routes = [{
path: 'cool',
component: CoolComponent
}];

Using directives
● *ngIf - Renders some HTML if the
condition is true.
● *ngFor - Repeats elements by
looping over an array of data.
● ngClass - Applies CSS class
conditionally.
● ngStyle - Applies styles conditionally.
● <div *ngIf="clicked">Clicked!</div>
● <div *ngFor="let boat of boats">
{{ boat.name }}
</div>
● <h3 [ngClass]="{
'green': boat.name === 'Starfire',
'red' : boat.name === 'Oracle'
}">
● <h3 [ngStyle]="{
'color': true ? 'red' : 'green'
}">

Sharing Data Between
Components

Parent to Child: Sharing data via Input
● This is probably the most common and straightforward method of sharing data.
● It works by using the @Input() decorator to allow data to be passed via the template.

Examples
parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `<app-child
[childMessage]="parentMessage"></app-child>`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent{
parentMessage = "message from parent"
constructor() { }
}
child.component.ts
import { Component, Input } from
'@angular/core';
@Component({
selector: 'app-child',
template: `Say {{ message }}`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() childMessage: string;
constructor() { }
}

Child to Parent: Sharing data via ViewChild
● ViewChild allows one component to be injected into another, giving the parent access
to its attributes and functions.
● However, is that child won’t be available until after the view has been initialized. This
means we need to implement the AfterViewInit lifecycle hook to receive the data from
the child.

parent.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from "../child/child.component";
@Component({
template: `Message: {{ message }}<app-child></app-child>`,
})
export class ParentComponent implements AfterViewInit {
@ViewChild(ChildComponent) child;
constructor() { }
message:string;
ngAfterViewInit() {
this.message = this.child.message
}}}

child.component.ts
import { Component} from '@angular/core';
@Component({
template: ``,
})
message = 'Hello!';
constructor() { }
}

Child to Parent: Sharing data via Output
● Another way to share data is to emit data from the child, which can be listed by the
parent.
● This approach is ideal when you want to share data changes that occur on things like
button clicks and other user events.
● In the parent, we create a function to receive the message and set it equal to the
message variable.

parent.component.ts
import { Component } from '@angular/core';
@Component({
template: `Message: {{message}}
<app-child (messageEvent)="receiveMessage($event)"></app-child>`,
})
export class ParentComponent {
constructor() { }
message:string;
receiveMessage($event) {
this.message = $event
}
}

child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
template: `<button (click)="sendMessage()">Send Message</button>`,
})
message: string = "Hello!"
@Output() messageEvent = new EventEmitter<string>();
constructor() { }
sendMessage() {
this.messageEvent.emit(this.message)
}
}

Unrelated Components: Sharing data
with a Service
● When passing data between components that lack direct connection, such as
siblings ets., you should have a shared service.
● When you have data that should always be shared then RxJs Subject is useful in this
situation.
● The parent, child sibling components all receive the same treatment.

data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject(null);
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}

parent.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
template: `{{message}}`,
styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
}

sibling.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-sibling',
template: `{{message}}<button (click)="newMessage()">New Message</button>`,
styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
newMessage() { this.data.changeMessage("Hello from Sibling") }
}

Sharing Data Between Angular Components

More Related Content

What's hot (20)

Similar to Sharing Data Between Angular Components (20)

More from Squash Apps Pvt Ltd (15)

Recently uploaded (20)

Sharing Data Between Angular Components