206 BROUGHT TO YOU IN PARTNERSHIP WITH

CONTENTS

öö ANGULAR ESSENTIALS

öö HOW IS ANGULAR DIFFERENT FROM

ANGULARJS?

Angular öö

öö

öö
ANGULAR’S BASIC ARCHITECTURE

SETTING UP THE ENVIRONMENT

COMPONENTS

Essentials
öö DATA BINDING

öö COMPONENT COMMUNICATION

öö DIRECTIVES

ORIGINAL BY GIL FINK, CEO AND SENIOR CONSULTANT, SPARXYS

WRITTEN BY DHANANJAY KUMAR, DEVELOPER EVANGELIST, INFRAGISTICS

ANGULAR ESSENTIALS • Hierarchy: Angular has an architecture built around a

Angular is a widely used web application platform and framework hierarchy of components.
DZO N E .CO M/ RE FCA RDZ

created and maintained by Google. It serves as a total rewrite to • Syntax: Angular has a different expression syntax for event
AngularJS, and the "Angular" name is meant to include all versions of and property binding.
the framework starting from 2 and up.
• Dynamic loading: Angular will load libraries into memory at

TypeScript is the core of Angular, being the language upon which run-time, retrieve and execute functions, and then unload the

Angular is written. As such, Angular implements major and library from memory.

core functionalities as TypeScript libraries while building client • Iterative callbacks: Using RxJS, Angular makes it easier to
applications with additional HTML. compose asynchronous or callback-based code.

• Asynchronous template compilation: Angular, without

For a variety of reasons, Angular has grown in popularity with
controllers and the concept of "scope," makes it easier to
developers. It lends itself to maintenance ease with its component
pause template rendering and compile templates to generate
and class-based system, modular building, hierarchical structure,
the defined code.
and simple, declarative templates. Furthermore, its cross-platform
capabilities are advantageous to enterprise and SMB developers,
including its speed with server-side rendering.

This Refcard will go over the essential pieces of Angular and the main
concepts behind working with the ever-growing platform for web-
Ignite UI for Angular
based applications. The fastest Data Grid and Charts for any
modern web & mobile experience!
HOW IS ANGULAR DIFFERENT FROM
ANGULARJS?
FREE TRIAL
In the past, you might have worked with or learned about AngularJS.
There are a few main differences between the two that you need to
know about:
• Modularity: More of Angular's core functionalities have
moved to modules.

1
 Ignite UI for Angular
Specialized Angular UI Components for Modern
Experiences Across Mobile & Desktop

Open Source True Angular Sketch UI Kit Material Design A11y

Download Your Free Trial

Ignite UI for Angular includes:

Grids & Lists Styling & Themes Data Entry & Display Menus Notifications
Data Grid Theming Icon Navigation Drawer Snack Bar
List View Shadows Mask Directive Navbar Toast
Combo Data Entry & Display Input Groups Services Scheduling
Charts Drop Down Linear Progress CSV Exporter Calendar
Category Buttons Circular Progress Excel Exporter Date Picker
Chart Button Group Virtualization Time Picker
Layouts
Financial Chart Checkbox Chip
Layout Manager
Gauges Switch Interactions Carousel
Bullet Graph Radio Button Dialog Window Bottom Navigation
Linear Gauge Label Slider Card
Radial Gauge Input Ripple Avatar
Badge Toggle Tabs
Overlay
 ANGULAR ESSENTIALS

• TypeScript: Angular includes ES6 and its superset, TypeScript. NGMODULES

NgModules are excellent for organizing related items, and they
ANGULAR'S BASIC ARCHITECTURE function to configure both the injector and compiler. You'll find that
Here's a brief overview of the architecture involved and the building
that the NgModule is named as such, since it's a class that is marked
blocks that I'll cover in this piece:
by the @NgModule decorator.

• NgModules: Declares a compilation context for a set of This decorator had the information on how to compile a component's
components that is dedicated to an application domain, a template and how to create an injector at runtime, all within a
workflow, or a related set of capabilities. metadata object. As you could guess, @NgModule serves to identify
and bridge the gap between both its own directives, components, and
• Components: Defines a class that contains application
pipes, and external components that rely on these pieces.
data and logic and works with an HTML template that
defines a view. The exports property also makes some of the module's make-up
public, ensuring that the external components can effectively
• Template: Combines HTML with Angular markup that can
use them.
modify HTML elements before they're displayed.

As a last bit, @NgModule also adds services providers to the

• Directive: Attaches custom behavior to elements in the DOM.
application dependency injectors, foundationally making the
• Two-way data binding: Coordinates the parts of a template application more adaptable.
with the parts of a component.
ANGULAR BOOTSTRAPPING
• Services: Typically, a class used to increase modularity and Understanding that an NgModule describes how an application's
reusability with a narrow and well-defined purpose. parts are to work and fit together, it makes sense that every Angular
application has at least one Angular module. This core module
DZO N E .CO M/ RE FCA RDZ

• Dependency injection: Provides components with needed functions as the "root" module for the application, and the one that
services and gives access to a service class. you would bootstrap to launch the application.

• Routing: Defines a navigation path among the different There are three basic components to the root module, which we'll
application states lets you view application hierarchies. discuss briefly.

This diagram best represents the relationship between the DECLARATIONS ARRAY
building blocks: Components used in an NgModule need to be added to the
declarations array as a way to tell Angular that these specific
components belong to this specific module. On top of this, since only
declarables can be added to the declarations array, you'll find that the
array will be populated with various components, directives, and pipes.

Keep in mind that declarables can only belong to one module.

IMPORTS ARRAY
The Imports array contains all dependent modules.

PROVIDERS ARRAY
The Providers array contains all Services dependencies.
SETTING UP THE ENVIRONMENT
In order to set up the environment, you should start by downloading COMPONENTS
Angular with the Angular CLI tool. If you have a machine that doesn't In Angular applications, what you see in the browser (or elsewhere)
have Node.js and npm installed, make sure to download and install is a component. A component consists of the following parts:
them here.
1. A TypeScript class called the Component class

Then, you'll run a global install of the Angular CLI: 2. An HTML file called the template of the component

npm install --g \@angular/cli 3. An optional CSS file for the styling of the component

3 BROUGHT TO YOU IN PARTNERSHIP WITH

 ANGULAR ESSENTIALS

called a view and is seen by the user on the screen to interact.

• Metadata that defines the behavior of a component.

Component metadata is applied to the class using the @
Component decorator. Different behavior of the component
can be passed as properties of the object, which is an input
parameter of the @Component decorator.

COMPONENT METADATA
The @Component decorator decorates a class as a component. It is
a function that takes an object as a parameter. In the @Component
A component is a type of directive with its own template. Whatever decorator, we can set the values of different properties to set the
you see in an Angular application is a component. behavior of the component. The most used properties are as follows:
• template

CREATING A COMPONENT • templateUrl

You can use an Angular CLI command to generate a component as
• Providers
shown below:
• styles
ng generate component Product • styleUrls

This command will generate PoductComponent as shown below: • selector

• encapsulation
import { Component, OnInit } from '@angular/core';
• changeDetection
@Component({
• animations
DZO N E .CO M/ RE FCA RDZ

selector: 'app-product',
templateUrl: './product.component.html', • viewProviders
styleUrls: ['./product.component.scss']
}) Apart from the above-mentioned properties, there are also other
export class ProductComponent implements OnInit { properties. Let's look into these important properties one by one.

constructor() { } TEMPLATE AND TEMPLATEURL

A template is the part of the component that gets rendered on the

ngOnInit() {
page. We can create a template in two ways:
}

1. Inline template: template property

}
2. Template in an external file: templateUrl property
A component is a class decorated with the @Component decorator.
There are mainly four steps to create a component: To create an inline template, the "tilt" is a symbol used to create
multiple lines in the template. A single-line inline template can be
1. Create a class and export it. This class will contain data and created using either single quotes or double quotes. For the inline
the logic. template, set the value of template property. A complex template
2. Decorate the class with @component metadata. Metadata can be created in an external HTML file and can be set using the
describes the component and sets the value for different templateUrl property.
properties.
SELECTOR
3. Import the required libraries and modules to create the
A component can be used using the selector. In the above example,
component.
the selector property is set to <app-product>. We can use the
4. Create a template of the component and optionally style of
component on the template of other components using its selector.
the component.
STYLES AND STYLEURLS
As you can see, the generated ProductComponent consists of: A component can have its own styles or it can refer to various other
• A class to hold data and the logic. external style sheets. To work with styles, @Component metadata has

• HTML template and styles to display data in the app. It is also styles and styleUrls properties. We can create inline styles by

4 BROUGHT TO YOU IN PARTNERSHIP WITH

 ANGULAR ESSENTIALS

setting the value of the styles property. We can set external style The component must be part of a module. To use a component in a
using styleUrls property. module, first import it and then pass it to declaration array of the module.

PROVIDERS @NgModule({
declarations: [
To inject a service in a component, you pass that to the providers
AppComponent,
array. Component metadata has an array type property called the
ProductComponent
provider. In the providers, we pass a list of services being injected ],
in the component. We will cover this in detail in further sections.
DATA BINDING
CHANGEDETECTION In Angular, data binding determines how data will flow in between
This property determines how the change detector will work for the component class and component template.
the component. We set the ChangeDetectionStrategy of the
component in the property. There are two possible values: Angular provides us three types of data bindings:

1. Default 1. Interpolation

2. onPush 2. Property binding

3. Event binding
We will cover this property in detail in further sections.

ENCAPSULATION

This property determines whether Angular will create a shadow DOM

for a component. It determines the ViewEncapsulation mode of
the component. There are four possible values:
1. Emulated (this is the default)
DZO N E .CO M/ RE FCA RDZ

2. Native
3. None
4. ShadowDom
INTERPOLATION
Angular interpolation is one-way data binding. It is used to pass
TEMPLATE
data from the component class to the template. The syntax of
When you generate a component using Angular CLI, by default,
interpolation is {{propertyname}}.
selector, templateUrl, and styleUrl properties are set. For
ProductComponent, the template is in external HTML file product. Let's say that we have component class as shown below:
component.html.
export class AppComponent {
<p>
product works! product = {
</p>
title: 'Cricket Bat',
price: 500
You can pass data and capture events between the component
};
class and its template using data binding. We will cover this in }
detail in further sections.
We need to pass the product from the component class to the
USING A COMPONENT template. Keep in mind that to keep the example simple, we're hard-
A component can be used inside an Angular application in various ways: coding the value of the product object; however, in a real scenario,
data could be fetched from the database using the API. We can
1. As a root component.
display the value of the product object using interpolation, as shown
2. As a child component. We can use a component inside in the listing below:
another Component.
<h1>Product</h1>
3. Navigate to a component using routing. In this case, the <h2>Title : {{product.title}}</h2>
component will be loaded in RouterOutlet. <h2>Price : {{product.price}}</h2>

4. Dynamically loading component using

Using interpolation, data is passed from the component class to
ComponentFactoryResolver.
the template. Ideally, whenever the value of the product object is

5 BROUGHT TO YOU IN PARTNERSHIP WITH

 ANGULAR ESSENTIALS

changed, the template will be updated with the updated value of the <h1>Product</h1>

product object. <button (click)='addProduct()'>

Add Product
</button>
In Angular, there is something called the change detector service that
makes sure that the value of the property in the component class
and the template are in sync with each other. Angular provides you these three bindings. In event binding,
data flows from template to class and in property binding and
Therefore, if you want to display data in Angular, you should use interpolation, data flows from class to template.
interpolation data binding.

PROPERTY BINDING
Angular provides you with a second type of binding called property
binding. The syntax of property binding is the square bracket: []. It
allows for setting the property of HTML elements on a template with
the property from the component class.

So, let's say that you have a component class like the one below:
Angular does not have built-in two-way data binding; however, by
export class AppComponent {
combining property binding and event binding, you can achieve two-
btnHeight = 100;
btnWidth = 100; way data binding.
}

Now, you can set the height and width properties of a button
on a template with the properties of the component class using
DZO N E .CO M/ RE FCA RDZ

property binding.
Angular provides us a directive, ngModel, to achieve two-way data
<button
binding, and it's very easy to use. First, import FormsModule, and
[style.height.px] = 'btnHeight'
[style.width.px] = 'btnWidth' > then you can create two-way data binding:
Add Product
</button export class AppComponent {

Angular property binding is used to set the property of HTML name = 'foo';
elements with the properties of the component class. You can also }

set properties of other HTML elements like image, list, table, etc.
Whenever the property's value in the component class changes, the We can two-way data-bind the name property with an input box:
HTML element property will be updated in the property binding.
<input type="text" [(ngModel)]='name' />

EVENT BINDING
<h2>{{name}}</h2>
Angular provides you with a third type of binding to capture events
raised on templates in a component class. For instance, there's a
As you see, we are using [(ngModel)] to create two-way data-
button on the component template that allows you to call a function
binding between input control and name property. Whenever a
in the component class. You can do this using event binding. The
user changes the value of the input box, the name property will be
syntax behind event binding is (eventname).
updated and vice versa.

For this example, you might have a component class like this:
COMPONENT COMMUNICATION
export class AppComponent {
In Angular, components communicate to each other to share data
addProduct() {
such as object, string, number, array, or HTML.
console.log('add product');
}
To understand component communication, first, we need to
}
understand relationship between components. For example, when
You want to call the addProduct function on the click of a button on two components are not related to each other, they communicate
the template. You can do this using event binding: through an Angular service.

6 BROUGHT TO YOU IN PARTNERSHIP WITH

 ANGULAR ESSENTIALS

@INPUT
You can pass data from a parent component to a child component
using the @Input decorator. Data could be of any form such as the
primitive type's string, number, object, array, etc.

When you use a component inside another component, you create

a component hierarchy. The component being used inside another
component is known as the child component and the enclosing To understand use of @Input, let's create a component:
component is known as the parent component. As shown in the import { Component } from '@angular/core';
image below, in context of AppComponent, app-child is a child
component and AppComponent is a parent component. @Component({
selector: 'app-child',
import { Component } from '@angular/core'; template: `<h2>Hi {{greetMessage}}</h2>`
})
export class AppChildComponent {
@Component({
selector: 'app-root',
greetMessage = 'I am Child';
template: `
}
<h1>Hello {{message}}</h1>
<app-child></app-child> //child component Use the AppChild component inside AppComponent:
`,
@Component({
})
selector: 'app-root',
DZO N E .CO M/ RE FCA RDZ

export class AppComponent { //parent component template: `

message = 'I am Parent'; <h1>Hello {{message}}</h1>

} <app-child></app-child>
`,
})
Parent and child components can communicate to each other in
export class AppComponent {
following ways:
message = 'I am Parent';
}
• @Input()
• @Output() AppComponent is using AppChildComponent, so AppComponent
• Temp Ref Variable is the parent component and AppChildComponent is the child
• ViewChild component. To pass data, the @Input decorator uses the child
• ContentChild component properties. To do this, we'll need to modify child
AppChildComponent as shown in the listing below:

import { Component, Input, OnInit } from '@angular/core';

@Component({
selector: 'app-child',
template: `<h2>Hi {{greetMessage}}</h2>`
})
export class AppChildComponent implements OnInit {
@Input() greetMessage: string;
constructor() {

}
When components are not related to each other, they communicate
ngOnInit() {
using services. Otherwise, they communicate using one of the
various options depending on the communication criteria. Let's
}
explore all the options one by one. }

7 BROUGHT TO YOU IN PARTNERSHIP WITH

 ANGULAR ESSENTIALS

As you notice, we have modified the greetMessage property with })

the @Input() decorator. So essentially, in the child component, we export class AppChildComponent {

have decorated the greetMessage property with the @Input()

handleclick() {
decorator so that value of the greetMessage property can be
set from the parent component. Next, let's modify the parent
console.log('hey I am clicked in child');
component AppComponent to pass data to the child component.
}

import { Component } from '@angular/core'; }

@Component({ There is a button in the AppChildComponent template calling the

selector: 'app-root', function handleclick. Let's use the app-child component inside the
template: ` AppComponent as shown in the listing below:
<h1>Hello {{message}}</h1>
<appchild [greetMessage]="childmessage"></appchild> import { Component, OnInit } from '@angular/core';
`, @Component({
}) selector: 'app-root',
export class AppComponent {
template: `<app-child></app-child>`
})
message = 'I am Parent';
export class AppComponent implements OnInit {
childmessage = 'I am passed from Parent to child
ngOnInit() {
component';
}

} }

Here, we're using AppChildComponent inside AppComponent, thereby

From the parent component, we are setting the value of the child
DZO N E .CO M/ RE FCA RDZ

creating a parent/child kind of relationship in which AppComponent

component's property greetMessage. To pass a value to the child
is the parent and AppChildComponent is the child. When we run the
component, we need to pass the child component property inside
application, we'll see this message in the browser console:
a square bracket and set its value to any property of the parent
component. We are passing the value of the childmessage property
from the parent component to the greetMessage property of the
child component.

@OUTPUT
You can emit the event from the child component to the parent
component using the @Output decorator.
So far, it's very simple to use event binding to get the button to call
the function in the component. Now, let's tweak the requirement a
bit. What if you want to execute a function of AppComponent on the
click event of a button inside AppChildComponent?

TEMP REF VARIABLE

To do this, you will have to emit the button-click event from
Angular is based on a one-directional data flow and does not have
AppChildComponent. Import EventEmitter and output from @
two-way data binding. So, we use @Output in a component to emit
angular/core.
an event to another component. Let's modify AppChildComponent
as shown in the listing below: Here, we are going to emit an event and pass a parameter to the
event. Modify AppChildComponent as shown in next code listing:
import { Component, Input, EventEmitter, Output } from '@
angular/core'; import { Component, EventEmitter, Output } from '@angular
core';
@Component({ @Component({
selector: 'app-child', selector: 'app-child',
template: `<button (click)="valueChanged()">Click me
template: `<button (click)="handleclick()">Click me<
<button> `
button> `
CODE CONTINUED ON NEXT COLUMN CODE CONTINUED ON NEXT PAGE

8 BROUGHT TO YOU IN PARTNERSHIP WITH

 ANGULAR ESSENTIALS

}) As you can see, the function of AppComponent is called upon the

export class AppChildComponent {
click event of the button placed on the AppChildComponent. This
@Output() valueChange = new EventEmitter();
is can be done with @Output and EventEmitter. When you run
counter = 0;
valueChanged() { the application and click the button, you can see the value of the
counter in the browser console. Each time you click on the button,
this.counter = this.counter + 1;
the counter value is increased by 1.
this.valueChange.emit(this.counter);

}
}

We performed the following tasks in the AppChildComponent class:

• Created a variable called counter that will be passed as the

parameter of the emitted event.

• Created an EventEmitter valueChange that will be

emitted to the parent component.

• Created a function named valueChanged(). This function DIRECTIVES

Directives create DOM elements and change their structure or
is called on the click event of the button, and inside the
behavior in an Angular application. There are three types of
function, the event valueChange is emitted.
directives in Angular:
• While emitting the valueChange event, the value of the
1. Components: Directives with templates.
counter is passed as a parameter.
2. Attribute directives: Change appearance and behavior of an
DZO N E .CO M/ RE FCA RDZ

In the parent component AppComponent, the child component element, component, or other directive.
AppChildComponent can be used as shown in the listing below: 3. Structural directives: Change DOM layout by adding or
removing elements.
import { Component, OnInit } from '@angular/core';
@Component({ The basic difference between a component and a directive is that
selector: 'app-root',
a component has a template, whereas an attribute or structural
template: `<app-child
directive does not have a template. Angular has provided us
(valueChange)='displayCounter($event)'></app-child>`
}) many inbuilt structural and attribute directives. Inbuilt structural
export class AppComponent implements OnInit { directives are *ngFor and *ngIf. Attribute directives are NgStyle
ngOnInit() { and NgModel.
}
displayCounter(count) { USING STRUCTURAL DIRECTIVES
console.log(count); *ngIf is a structure directive used to provide an "if" condition to
}
the statements to get executed. If the expression evaluates to a
}
False value, the elements are removed from the DOM, whereas if it
evaluates to True, the element is added to the DOM.
Right now, we are performing the following tasks in the
AppComponent class: Consider the below listing. In this, the *ngIf directive will add div in
DOM if the value of showMessage property is True.
• Using <app-child> in the template.
@Component({
• In the <app-child> element, using event binding to use the selector: 'app-message',
template:`
valueChange event.
<div *ngIf = 'showMessage'>
• Calling the displayCounter function on the Show Message
</div>
valueChange event.
`

• In the displayCounter function, printing the value of the })

counter passed from the AppChildComponent. CODE CONTINUED ON NEXT PAGE

9 BROUGHT TO YOU IN PARTNERSHIP WITH

 ANGULAR ESSENTIALS

export class AppMessageComponent { export class AppMessageComponent {

showMessage = true; data = [

} {name : 'foo'},
{name: 'koo'}
Keep in mind that *ngIf does not hide or show a DOM element. ];

Rather, it adds or removes depending on the condition. }

The *ngFor structure directive creates DOM elements in a loop. In most cases, you won't have to create custom structural directives;

Consider the below listing. In this, the *ngFor directive will add rows built-in directives should be enough.

in a table depending on number of items in the data array.

@Component({

selector: 'app-message',
template:`
<table>
<tr *ngFor='let f of data'>
<td>{{f.name}}</td>
</tr>
</table>
`
})
CODE CONTINUED ON NEXT COLUMN

Written by Dhananjay Kumar, Developer Evangelist , Infragistics

DZO N E .CO M/ RE FCA RDZ

Dhananjay Kumar is a Developer Evangelist for Infragistics. He has been awarded the prestigious Microsoft MVP
award nine times. He is an organizer of ng-India, an India Angular Conference

DZone, Inc.
DZone communities deliver over 6 million pages each 150 Preston Executive Dr. Cary, NC 27513
month to more than 3.3 million software developers, 888.678.0399 919.678.0300
architects and decision makers. DZone offers something for
Copyright © 2018 DZone, Inc. All rights reserved. No part of this publication
everyone, including news, tutorials, cheat sheets, research
may be reproduced, stored in a retrieval system, or transmitted, in any form
guides, feature articles, source code and more. "DZone is a or by means electronic, mechanical, photocopying, or otherwise, without
developer’s dream," says PC Magazine. prior written permission of the publisher.

10 BROUGHT TO YOU IN PARTNERSHIP WITH