Angular 101 — A Technical Guide to Basic UI Design with Angular

It is often said that “A picture is worth thousand words.” Today, we can see a corollary of this in big data analytics — if algorithms are the soul of data science and User Experience (UX) is its core, User Interface (UI) design is the interaction layer with the user that enables easy digestion of insights and makes them actionable. In fact, UI plays a crucial role in data visualization — a critical component of all data science applications.

In this article, the UI team at FORMCEPT shares with you a step-by-step how-to guide on one of the most potent tools for UI in data science — Angular.

Background

Angular has been developed by the Angular Team which was created by Google specifically for its development. Angular is a framework used to build client-facing applications. It is used in the development of Single Page Applications (SPAs). If you are new to Angular, then the first thing you should know is the key difference between Angular and AngularJS. AngularJS was the first version developed by Angular team, which they basically revamped from 2nd version onwards and named as just Angular. Although AngularJS gets frequently updated as 1.x.x, here we’ll be discussing Angular 2 onwards.

Most of the documentation you’ll find online would be in TypeScript (by Microsoft). So, knowing TypeScript will give you a clear advantage, but don’t worry — if you wish to use JS, there are workarounds for that too.

Angular is popular for its modular approach and reusable code. Re-usability in Angular can be enabled by creating Components (explained later in this article). This approach makes development quicker and easier.

Setting Up Angular

// installs Angular Command Line Interface, which helps us to do most of the work in Angular.
$ npm install -g @angular/cli
//This command automatically creates a sample template structure with ‘my-app’ as the application name.
$ ng new my-app
//and this command navigates you to your application folder
$ cd my-app
//You can now start Angular server using above command.
$ ng serve

This is how a default angular app looks like.

Angular Fundamentals

Components — Components are the most basic building block of an UI in an Angular application. An Angular application can be depicted as a tree of Angular components. Angular components always have a template and these reusable elements are available throughout the application. To create a component, run the command below inside the terminal.

$ ng generate component compName

Interpolation —Interpolation is used to bind the properties of our class to the HTML code. So, if we wish to show our class properties in the template(HTML), we use interpolation. Interpolation is JS code written inside {{}}, also known as mustache syntax. So whatever we write inside these parentheses is read by Angular and is inserted inside HTML code. For example, if we write something like below , it’ll display ‘2’ as output on our HTML page.

{{1+1}}

Property Binding — If we wish to bind our HTML property with some property in our class, we use the concept of Property Binding. For example, we want to use the component class to control the value of any input field, then we can set value of that field as [value] = “thatProperty”.

2-Way Binding — Two way binding is very helpful if we wish to set and also retrieve value of any HTML field. Syntax for 2 way binding is [()]. To remember this, think of it as a banana inside a box.

Built in Directives — Directives are similar to components except that they don’t have any view(template). We typically associate directives to existing elements by using attribute selectors, like:

<elemenent aDirective></element>

There are various built in directives like ngIf,ngFor and ngSwitch.

Let’s try *ngFor :

In .ts file -

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Formcept';
  public colors = ['red','green'];
}

Here we have created a colors variable and initialized it.

In .html file -

<h1>Welcome to {{title}}</h1>
<div *ngFor = 'let color of colors'>
   <h2 style.color = "{{color}}">{{color}}</h2>
</div>

Above, we used ‘ngFor’ for traversing through the created variable and displayed it using ‘h2’ tag.

Routing — To navigate between different pages in your application while maintaining it as an SPA, we use Routing. Just create an application with routing option, you can do that by adding ‘ — routing’ while creating a new application.

Go to app-routing.module.ts file and configure the routes as below:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from "./home/home.component";
import { AboutComponent } from "./about/about.component";
const routes: Routes = [
{
path: '',
component: HomeComponent
},
path: 'about',
component: AboutComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Once you have created an application using routing, the add multiple component using above discussed method and configures the route.Add buttons to your template and use ‘routerLink’ directive to navigate as shown below.

<button routerLink="/about">About</button>
<button routerLink="">Home</button>

Service — Service is a class with a specific purpose. You can create service using Angular CLI and typing command below. Now, if you check your application folder structure, you’ll find a .ts file named as serviceName.service.ts. Service is used to share data between components and also to implement application logic.

$ ng generate service serviceName

Concluding Note

With this, we have covered the initial ground for you to start implementing Angular. At FORMCEPT, UI is a serious affair — and Angular has proven itself to be a time-tested tool. If you find this post useful, please share it in your network. Stay tuned to us for more — follow us on Medium at https://medium.com/@formcept or visit our blog here.