Angular Essentials

This Refcard will teach you about the essential pieces of Angular and the main concepts behind working with this ever-growing platform for web-based applications through detailed diagrams, example code snippets, and in-depth explanations. You will learn about using TypeScript libraries, component classes, data binding mechanisms, and more.

Angular Essentials

This Refcard will teach you about the essential pieces of Angular and the main concepts behind working with this ever-growing platform for web-based applications through detailed diagrams, example code snippets, and in-depth explanations. You will learn about using TypeScript libraries, component classes, data binding mechanisms, and more.

Two-way data binding: Coordinates the parts of a template with the parts of a component.

Services: Typically, a class used to increase modularity and reusability with a narrow and well-defined purpose.

Dependency injection: Provides components with needed services and gives access to a service class.

Routing: Defines a navigation path among the different application states lets you view application hierarchies.

This diagram best represents the relationship between the building blocks:

Section 3

Setting Up the Environment

In order to set up the environment, you should start by downloading Angular with the Angular CLI tool. If you have a machine that doesn’t have Node.js and npm installed, make sure to download and install them here.

Then, you’ll run a global install of the Angular CLI:

npm install --g \@angular/cli

NgModules

NgModules are excellent for organizing related items, and they function to configure both the injector and compiler. You’ll find that that the NgModule is named as such, since it’s a class that is marked by the @NgModule decorator.

This decorator had the information on how to compile a component’s template and how to create an injector at runtime, all within a metadata object. As you could guess, @NgModule serves to identify and bridge the gap between both its own directives, components, and pipes, and external components that rely on these pieces.

The exports property also makes some of the module’s make-up public, ensuring that the external components can effectively use them.

As a last bit, @NgModule also adds services providers to the application dependency injectors, foundationally making the application more adaptable.

Angular Bootstrapping

Understanding that an NgModule describes how an application’s parts are to work and fit together, it makes sense that every Angular application has at least one Angular module. This core module functions as the “root” module for the application, and the one that you would bootstrap to launch the application.

There are three basic components to the root module, which we’ll discuss briefly.

Declarations Array

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.

Section 4

Components

In Angular applications, what you see in the browser (or elsewhere) is a component. A component consists of the following parts:

A TypeScript class called the Component class

An HTML file called the template of the component

An optional CSS file for the styling of the component

A component is a type of directive with its own template. Whatever you see in an Angular application is a component.

Creating a Component

You can use an Angular CLI command to generate a component as shown below:

A component is a class decorated with the @Component decorator. There are mainly four steps to create a component:

Create a class and export it. This class will contain data and the logic.

Decorate the class with @component metadata. Metadata describes the component and sets the value for different properties.

Import the required libraries and modules to create the component.

Create a template of the component and optionally style of the component.

As you can see, the generated ProductComponent consists of:

A class to hold data and the logic.

HTML template and styles to display data in the app. It is also 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 decorator, we can set the values of different properties to set the behavior of the component. The most used properties are as follows:

template

templateUrl

Providers

styles

styleUrls

selector

encapsulation

changeDetection

animations

viewProviders

Apart from the above-mentioned properties, there are also other properties. Let’s look into these important properties one by one.

Template and TemplateUrl

A template is the part of the component that gets rendered on the page. We can create a template in two ways:

Inline template: template property

Template in an external file: templateUrl property

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 created using either single quotes or double quotes. For the inline template, set the value of template property. A complex template can be created in an external HTML file and can be set using the templateUrl property.

Selector

A component can be used using the selector. In the above example, the selector property is set to <app-product>. We can use the component on the template of other components using its selector.

Styles and StyleUrls

A component can have its own styles or it can refer to various other external style sheets. To work with styles, @Component metadata has styles and styleUrls properties. We can create inline styles by setting the value of the styles property. We can set external style using styleUrls property.

Providers

To inject a service in a component, you pass that to the providers array. Component metadata has an array type property called the provider. In the providers, we pass a list of services being injected in the component. We will cover this in detail in further sections.

ChangeDetection

This property determines how the change detector will work for the component. We set the ChangeDetectionStrategy of the component in the property. There are two possible values:

Default

onPush

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:

Emulated (this is the default)

Native

None

ShadowDom

Template

When you generate a component using Angular CLI, by default, selector, templateUrl, and styleUrl properties are set. For ProductComponent, the template is in external HTML file product.component.html.

<p>
product works!
</p>

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.

Using a Component

A component can be used inside an Angular application in various ways:

As a root component.

As a child component. We can use a component inside another Component.

Navigate to a component using routing. In this case, the component will be loaded in RouterOutlet.

Dynamically loading component using ComponentFactoryResolver.

The component must be part of a module. To use a component in a module, first import it and then pass it to declaration array of the module.

@NgModule({
declarations: [
AppComponent,
ProductComponent
],

Section 5

Data Binding

In Angular, data binding determines how data will flow in between the component class and component template.

Angular provides us three types of data bindings:

Interpolation

Property binding

Event binding

Interpolation

Angular interpolation is one-way data binding. It is used to pass data from the component class to the template. The syntax of interpolation is {{propertyname}}.

We need to pass the product from the component class to the template. Keep in mind that to keep the example simple, we’re hard-coding the value of the product object; however, in a real scenario, data could be fetched from the database using the API. We can display the value of the product object using interpolation, as shown in the listing below:

Using interpolation, data is passed from the component class to the template. Ideally, whenever the value of the product object is changed, the template will be updated with the updated value of the product object.

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.

Therefore, if you want to display data in Angular, you should use 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:

export class AppComponent {
btnHeight = 100;
btnWidth = 100;
}

Now, you can set the height and width properties of a button on a template with the properties of the component class using property binding.

Angular property binding is used to set the property of HTML 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 HTML element property will be updated in the property binding.

Event Binding

Angular provides you with a third type of binding to capture events raised on templates in a component class. For instance, there’s a button on the component template that allows you to call a function in the component class. You can do this using event binding. The syntax behind event binding is (eventname).

Angular provides you these three bindings. In event binding, data flows from template to class and in property binding and interpolation, data flows from class to template.

Two-Way Data Binding

Angular does not have built-in two-way data binding; however, by combining property binding and event binding, you can achieve two-way data binding.

Angular provides us a directive, ngModel, to achieve two-way data binding, and it’s very easy to use. First, import FormsModule, and then you can create two-way data binding:

export class AppComponent {
name = 'foo';
}

We can two-way data-bind the name property with an input box:

<input type="text" [(ngModel)]='name' />
<h2>{{name}}</h2>

As you see, we are using [(ngModel)] to create two-way data-binding between input control and name property. Whenever a user changes the value of the input box, the name property will be updated and vice versa.

Section 6

Component Communication

In Angular, components communicate to each other to share data such as object, string, number, array, or HTML.

To understand component communication, first, we need to understand relationship between components. For example, when two components are not related to each other, they communicate through an Angular service.

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 component is known as the parent component. As shown in the image below, in context of AppComponent, app-child is a child component and AppComponent is a parent component.

Parent and child components can communicate to each other in following ways:

@Input()

@Output()

Temp Ref Variable

ViewChild

ContentChild

When components are not related to each other, they communicate 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.

@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.

AppComponent is using AppChildComponent, so AppComponent is the parent component and AppChildComponent is the child component. To pass data, the @Input decorator uses the child component properties. To do this, we’ll need to modify child AppChildComponent as shown in the listing below:

As you notice, we have modified the greetMessage property with the @Input() decorator. So essentially, in the child component, we have decorated the greetMessage property with the @Input() decorator so that value of the greetMessage property can be set from the parent component. Next, let’s modify the parent component AppComponent to pass data to the child component.

From the parent component, we are setting the value of the child component’s property greetMessage. To pass a value to the child component, we need to pass the child component property inside 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.

Temp Ref Variable

Angular is based on a one-directional data flow and does not have two-way data binding. So, we use @Output in a component to emit an event to another component. Let’s modify AppChildComponent as shown in the listing below:

Here, we’re using AppChildComponent inside AppComponent, thereby creating a parent/child kind of relationship in which AppComponent is the parent and AppChildComponent is the child. When we run the application, we’ll see this message in the browser console:

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?

To do this, you will have to emit the button-click event from AppChildComponent. Import EventEmitter and output from @angular/core.

Here, we are going to emit an event and pass a parameter to the event. Modify AppChildComponent as shown in next code listing:

Right now, we are performing the following tasks in the AppComponent class:

Using <app-child> in the template.

In the <app-child> element, using event binding to use the valueChange event.

Calling the displayCounter function on the valueChange event.

In the displayCounter function, printing the value of the counter passed from the AppChildComponent.

As you can see, the function of AppComponent is called upon the click event of the button placed on the AppChildComponent. This is can be done with @Output and EventEmitter. When you run 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, the counter value is increased by 1.

Section 7

Directives

Directives create DOM elements and change their structure or behavior in an Angular application. There are three types of directives in Angular:

Components: Directives with templates.

Attribute directives: Change appearance and behavior of an element, component, or other directive.

The basic difference between a component and a directive is that a component has a template, whereas an attribute or structural directive does not have a template. Angular has provided us many inbuilt structural and attribute directives. Inbuilt structural directives are *ngFor and *ngIf. Attribute directives are NgStyle and NgModel.

Using Structural Directives

*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.

Consider the below listing. In this, the *ngIf directive will add div in DOM if the value of showMessage property is True.