Angular – New Application Basics

Introduction

In previous post, we started with Angular basics and setup an angular application. Today, we’ll continue our learning with some more angular basics such as components, and simple data binding with HTML elements.

Components

• Components are the basic building blocks of Angular applications.
• A component controls a portion of the screen.
• Component is a Decorator Function, which turns plain typescript classes to angular components.
• We use a custom HTML tag (aka selector) to show, where we want our component to load inside our HTML.

Modules

Modules provide a way to organize our application.

Every Angular application must have a “root module”, which is required to launch the application.

Using feature modules help us patriation our application into logical grouping.

We’ll be implementing modules in later posts.

Routing

Angular Router enables navigation from one view to another.

<router-outlet></router-outlet> : where we can place components, we navigate to.

we’ve talked about routing in previous post as well.

Sending Data Around

How do we send a property from our component class into our HTML?

We can use Interpolation to Print Properties. See example below

Structural Directives

A directive (within Angular) is how we add dynamic behavior to HTML.

There are three different kinds of directives:

• Component : A component directive has a template.
• Structural: *ngFor (loops through an array), *ngIf (conditional) etc.
• Attributes: We wont get to these for now.

• *ngFor is a structural directive. They alters layout by adding, removing or replacing HTML elements.
• *ngIf is another structural directive. It allows us to evaluate conditionals.

Transforming Data using Pipes

Using Pipes to Format Screen Data

• A pipe takes in data as input and transforms it to a desired output.
• e.g. How can we write property in capital letters?

Using the currency pipe with two parameters

• Notice the colon between parameters:
  • The second parameter is a Boolean indicating if we should use the currency symbol.

Additional pipes to use

• lowercase
• date
• number
• decimal
• replace
• slice
• Json

See documentation for more details.

Defining the Method

Lets see a basic method defined in the component

next example shows a simple data array and Let’s use an ES2015 for of loop in method body:

What we have learnt so far

• We can use pipes to transform our template output.
• How to create and use method in our component.

The ways Data can flow

In Angular, there are a few different ways that data can flow

Interpolation, Event & Property Binding

• {{pageTitle}}
• (click)=”onClickHandler()“
• [src]=”selectedCompany.imageUrl”
• ngModel

We ‘ve already seen the example of Interpolation and Property Binding. Lets see the following example of Event Binding:

Event binding allows us to listen to any DOM event and call a component method when it’s triggered.

Any standard DOM event can be listened for by wrapping it in parentheses and removing the “on” at the beginning of the word:

• mouseOver()
• blur()
• focus()
• keydown()
• submit()

Getting Additional Event Data

Sometimes you need additional event data, like which key is pressed or where the mouse is on the screen. This is what the Angular $event object is for.

We can send $event object in our methods:

Summary

In this post, we have covered some angular basics when starting with new applications. The sample application code is available from this git repository.

Till next time, happy coding.