Open in app

Sign in

Write

Sign in

Learning Angular

Dennis Seidel
9 min readMay 12, 2020

In this tutorial you will learn the deep fundamentals of Angular Framework. For a new project I need to get up to speed with Angular. So, I search the internet for the best tutorials and created a summary. As I will work in the “health & insurance” domain, I try to apply Angular to some use cases doing so.

This tutorial is work in progress/not complete and updated continuously. Feedback always welcome, I’m still learning 😊

Background and Business Use Cases

Price calculation is a good use case to understand the fundamentals of Angular. The use case touches on

  • Angular templating syntax
  • Building components

To focus on the basics, I stripped down the app to the following functional components:

The price calculation page includes

  • input fields and a button
  • a computation
  • displayed results
  • some marketing labels (e.g. LOWEST PREMIUM)

Plain HTML+JS vs Angular

Start by looking at the advantages and use cases of the Angular Framework. Without Angular you would create the price calculator with plain HTML + CSS:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by  Dennis</title>
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Let’s find your personalized plan:</h1>

<div>
  <label>Coverage starting</label>
  <input/>
</div>

<div>
  <label>Coverage for</label>
  <input/>
</div>

<div>
  <label>ZIP code</label>
  <input/>
</div>

<div>
  <label>My birthdate</label>
  <input type="date"/>
</div>

<div>
  <button onClick=onButtonClick()>See plan</button>
</div>

<div>
  <label>Product</label>
  <input id="product"/>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>function onButtonClick() {
	//imlement some calucation or backend call to 
	// calculate the insurance price and product recomendation
  document.getElementById("product").value = 'SUPER INSURANCE PRODUCT';
}

HealthInsuranceCalculator_Plain

Your web server sends these HTML and JS files to the browser. the browser interprets and displays the files. Read about how browser rendering works in detail.

This approach is simple but organizing large application code gets complex. Angular helps you by providing:

  • a module way to organize code
  • common functionality like routing, HTTP client and authentication

In comparison a library like jQuery only provides functionality to change the DOM. Angular is more opinionated and provides more features and a clear structure.

Add Angular to your web application

To use Angular, you add a build chain to your application including NodeJS and the Angular CLI. The build chain compiles your organized Angular code into plain JS and HTML code like you’ve seen above. This is different from libraries like jQuery. You can add jQuery to your application by adding a simple script tag to the HTML. This way you could use jQuery without compilation.

Start by installing dependencies by open the Terminal:

  1. NodeJS: brew install node
  2. AngularCLI: npm install -g @angular/cli@latest

Create a project with on Terminal with ng new healthinsurance-price-calculator. Then hit Enter twice to accept the CLI defaults (to not add Angular Routing and select CSS for styling).

Code: initial commit

Start your application

Start the project with npm start or ng serve. The commands open the default page in the browser. Both commands are equal because npm start uses ng serve you can see this inside your package.json. Open the application under http://localhost:4200/.

Important project files

Open the root directory of your project and look at the files. You find application code under /src/app. The folder includes 4 types of files:

  1. app.component.html: Component Template contains the HTML that gets displayed to a user.
  2. app.component.ts: Component Class contains code to run when important events occur (like when a user clicks a button).
  3. some.service.ts: Services contains code that fetches/stores/updates data.
  4. app.module.ts: Module defines a set of services + components that handle all the functionality for a part of your app

Next you look into how to create Applications with HTML and JS with Angular.

Angular Template Syntax

You learn to create and link the HTML and JS using Angular Templates. Understanding Angular Templates allows you to do everything you can do with plain JS and HTML with some extra convenience features.

Display HTML Content — by modifying the component template

To create the price calculator website, you first need to create some HTML to display in the Browser.

Start by replacing the default app page with the HTML code for our insurance pricing calculator.

First replace the default app page with the HTML code for our insurance pricing calculator.

Whenever you want to display content to the user you render HTML from the component template to him.

  1. Therefor open src/app/app.component.html in your editor.
  2. Replace the code with the following:
<h1>Let’s find your personalized plan:</h1>

<div>
  <label>Coverage starting</label>
  <input/>
</div>

<div>
  <label>Coverage for</label>
  <input/>
</div>

<div>
  <label>ZIP code</label>
  <input/>
</div>

<div>
  <label>My birthdate</label>
  <input type="date"/>
</div>

<div>
  <button>See plan</button>
</div>

<div>
  <label>Product</label>
  <input/>
</div>

The HTML code has many input fields with labels to get the required information to calculate the product price. The button will trigger the calculation later with an event. The Product input field displays later the calculated price.

Code: feat: render price calculator template

Bind HTML to the JS code

Next you create JS code. Then you bind the JS code to the HTML. The binding allows the HTML to call the JS code. The JS code can invoke some logic or interact with HTML / DOM. You can read more about the binding syntax in the Angular documentation.

First look at the example of handling DOM Events in JS without Angular. The example shows that there are different type of events e.g. click and change events.

Events in plain Javascript

First, you implement logic to listen for the click event on the See plan button and logging This is a test. to the console through a function in your component class. Open app.component.ts and add the onButtonClick function to the AppComponent class. Inside the function add a simple console.log('This is a test').

A click on the See plan button element in the app.component.html component template should execute the onButtonClick function. Thus, you add a (click) event to the button and bind it to the onButtonClick function.

Code: feat: Bind JS to click event

The code you wrote does not look like normal HTML. Because Angular used the Angular Template Syntax that extends HTML. By adding (click) to the <button> element you tell the Angular interpreter to bind the HTML click event to a function in the component class. You define the class by ="onButtonClick()". This is not a string but gets evaluated by the interpreter to code.

The event binding allows the template to execute code. A property binding reverses this behavior. When you bind the property value of an HTML element to a property in the class then an update of the class property updates the property of the HTLML element. This works as follows:

You use property binding to display the calculated price of the insurance product in the product field. First you add a property price='' on the class AppComponent in app.component.ts. Then you update the onButtonClick() function to set a price. Finally, you bind the value property of the input HTML element to the price property of the AppComponent class in your Component Template in app.component.html

Code: feat: bind html property to JS property

Binding the property of an element is not the best solution to display a list of products and prices. You want to display the value as simple text without the possibility of modifying it. This can be done by Interpolation.

Replace the <input> price element with a simple div and use {{ price }} to render the value of the price variable in the class component.

<div>
  <label>Product</label>
  {{ price }}
</div>

feat: replace input with simple text rendering

But how does the Angular compiler know to add this component class to this component template. This will be explained in detail in the next section. In short by using the @Component Annotation on the class in app.component.ts and reference the component template in the templateUrl:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Finally, you will make the sample better fit the price calculator requirements and add some features:

Building Components

Next you organize your application using components. Concepts like components are one of the main advantages provided by frameworks and libraries like Angular. Components allow you to build abstraction. Abstractions make maintaining the application easier.

Look at the wireframe of the price calculator. You see that the product list consists of the same elements 4 times. The simplest solution is to copy the code for the same HTML elements 4 times. This solution is hard to maintain. You need to implement a change to each list element in 4 locations. The abstraction hides the detailed HTML code on the higher level and makes the abstraction usable in many places.

  • Each component is designed to implement one ‘thing’ in the app that is visible on the screen
  • A component wraps up all the HTML and code to make one little widget work correctly
  • A component can be reused multiple times in the same application
  • Components can be nested or shown inside of each other
  • Every app has a component called the ‘App’ component, and it is always the most parent component. Up to now you worked in the single ‘App’ component.
  • Each component has its own Component Class, Component Template, Component CSS File and Spec File

Run ng generate component productCard to create a component in your application.

The command creates a folder, [component-name], in the project’s src/app path or the current path the command is executed in if it’s a child folder of the project. The folder has the following:

  • [component-name].component.ts the component class file
  • [component-name].component.css for styling the component
  • [component-name].component.html component html
  • [component-name].component.spec.ts tests for the component
  • index.ts which exports the component

Code: feat: generate component scaffold

Next, you render the product-card component in the root ‘App’ component. Add <app-product-card><app-product-card/> to app.component.html. You find the selector name in decorator of the product-card.component.ts file:

@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html',
  styleUrls: ['./product-card.component.css']
})

You will see the component displayed on the page.

Code: feat: add product card component

Next move the code from the app.component.html to the product-card.component.html. You will realize moving the HTML causes an error as the template no longer has access to the product date from the app.component.ts component class.

When you look how angular renders the HTML after the browser loaded all the HTML and JS files you see that each component class gets instantiated individually:

  1. Angular loads up each component class file, inspects the ‘selector’ property
  2. Angular then takes a look at the HTML document that got loaded into the browser
  3. <app-root> found! Angular finds a component with a matching ‘selector’
  4. Angular creates an instance of that component
  5. Angular turns the instance’s template into real HTML, then sticks the HTML into the app-root element (the ‘host’ element)
  6. While inspecting the app’s template, Angular sees the app-product-card element
  7. Angular creates an instance of that component
  8. Angular turns the instance’s template into real HTML, then sticks the HTML into the app-product-card element (the ‘host’ element)

To make the products data from the root App component available to the product-card component you propagate the product data to child components:

  1. In the parent component template, find where we create the child component (e.g. <app-product-card></app-product-card>)
  2. Decide on the property name that you want to use to communicate from the parent to the child (e.g. products)
  3. Add a new binding to the child component specifying the data we want to pass down (e.g. <app-product-card [products]="products"></app-product-card>)
  4. In the child component’s class file, you add an input property. This tells the component to expect the parent to provide the value for this property
    import { Component, OnInit, **Input** } from '@angular/core';
    ...
    export class ProductCardComponent implements OnInit {
    @Input() products = '';
    ...
    }
  5. In the child component’s template file, you reference that input property (e.g. *ngFor="let product of products" to loop over the products)

Code: feat: move product list to product-card component

Angular
Coding

--

--

Dennis Seidel

Written by Dennis Seidel

562 Followers

Engineer/“Architect” at Allianz/Ex-IBM —Product Builder for meaningful solutions at ❤

Help

Status

About

Careers

Blog

Privacy

Terms

Text to speech

Teams