Angular Communication Part 1

One of the most important aspect of anything is "Communication". Communication plays a foundation in any development, from "biology" to "technology", from "us" to "them". At least I am aware of "Communication" in Angular so I will continue on it ;)

As in real-reel life, there are different types of Communication, so does in Angular.

Communication Types In Angular:

Component <-> Associated Template
Component <-> Self
Component <-> Component

Actually there are different techniques we can implement Communication in Angular depending upon between whom we are trying to communicate. Find some of the techniques below:

Binding and Structural Directives
@ViewChild/@ViewChildren
@Input
@Output
Broadcaster/Service
Router

In this article I will cover first and very basic part Component <-> Associated Template. Communication between Component and its associated template often done by following technique:

Binding and Structural Directives

Binding

Interpolation

This is the most basic technique wherein the component can update its template/view about any property's value. Lets say instead of hard-coding "PageTitle" value inside the template(html), we can define the property "PageTitle" inside component (.ts) and by using interpolation ({{pageTitle}}) we can one-way bind the property to template. See Summary image below.

Property Binding

Lets say we want to adjust the width of the image to say 50 pixel. So we can use "[]" (open-close square brackets) which is the "property-binding" syntax in Angular. So we can define imageWidth property in component(.ts) and bind it to img tag's width property using "property-binding" like so [style.width.px]=imageWidth in (html). See Summary Image below.

Event Binding

Lets say we want to toggle Image show/hide on click of a button (html), so using "()" (open-close parenthesis) which is "event-binding" syntax in Angular we can bind "click" event of a button to our custom method (toggleImage()) where our logic of show/hide resides using "event-binding" like so (click)='toggleImage()'.See Summary Image below.

Two Way Binding

Lets say we want to filter our list of customer names from grid by typing values in filter text box above the grid. We can do that by two ways:

Using (ngModelChange)

By using

//component (.html)

<input type="text" id="filterText" [ngModel]="customer" (ngModelChange)=filterList($event)/>

//component (.ts)

customer : string = 'Customer 1';

filterList(string: customer){

//custom logic for Filtering...

}

2. Using Getter-Setter Properties

//component (.html)

<input type="text" id="filterText" [(ngModel)]="filterList" />

//component (.ts)

_filterList: string = 'Customer 1';

get filterList(){

return _filterList}

set filterList(value: string){

_filterList = value;

//custom logic for Filtering...

}

Structural Directives

We can modify the DOM using structural directives like *ngIf and *ngFor. As the name suggests, by using *ngIf we render the contents only if (*ngIf === true)
Similarly, if we want to display list of Customers, then we can loop through the list using *ngFor.

(.ts) showImage:boolean = false ==> (.html) <img *ngIf='showImage' >

(.ts) customers = Customers[] ==> (.html) <tr *ngFor='let customer of customers'>

* * Summary Image is used from Deborah Kurata "Angular Communication" Course in PluralSight.

Team Blog