Angular 15 Tutorial: Build your First Angular App

In this tutorial, you will learn how to create your very own TypeScript Angular 15 application from the ground up.

You'll learn the fundamental ideas of angular development, such as modules, components, and directives. In addition, you'll learn about event and property binding.

A basic calculator application will be developed to show all of the principles covered in this tutorial.

Prerequisites of working with angular 15

Let's start with the requirements and work our way up from there. You will need the following things:

• Working knowledge of TypeScript, HTML, and CSS.
• Node.js and NPM installed on your machine.
• Angular CLI 15 installed on your machine.

Generating our Angular 15 calculator project

Let's get started with creating a project once you've set up your environment by installing Node and Angular CLI on your machine. Open a terminal window and type the following command:

$ ng new ngcalculator

The CLI will ask you whether you would want to include routing in your project - you may respond with a No since routing will not be required in this demonstration. CSS is the stylesheets format that you should use.

Next, just wait for the CLI to create your project and download and install the necessary dependencies from npm before proceeding.

Afterwards, you can use the ng serve command to launch a live development server for your application:

$ cd ./ngcalculator
$ ng serve

Wait for the CLI to finish compiling your project and then start the server at http://localhost:4200.

Angular 15 modules & components

Component-based design is at the heart of Angular's architecture. Although there are two structures here, they are not the same - Building your application as a set of modules using a modular design.

Each aspect of your feature should be implemented as a separate module, as a general rule. In a component-based design, your application is built from the ground up from individual components.

In our Angular 15 project generated with the CLI, we already have a root module which is conventionally called AppModule and a root component which is conventionally called AppComponent.

The root module and component are the first bootstrapped by the Angular application (In the main.js and app.module.ts files).

According the Angular docs, this is the definition of a module:

Angular applications are modular, and NgModules is Angular's modularity mechanism. NgModules are containers for a coherent piece of code devoted to an application domain, a process, or a collection of features that are tightly connected. They may include components, service providers, and other code files whose scope is determined by the NgModule that contains them. They may import functionality exported by other NgModules as well as export chosen functionality for usage by other NgModules.

We don't need more than one module to build a basic calculator application, so let's keep it simple and utilize the root module to implement our functionality.

Note: You can generate a new module using the CLI: ng generate module <name>.

What about components

A component is in charge of a certain area of the application screen. It's just a TypeScript class (decorated with @Component) with an HTML template that renders the view.

In our calculator app, we don't need many components, but let's make one to encapsulate the calculator view and functionality. Open a new terminal, browse to the folder containing your project, and execute the following command:

$ ng generate component calculator --skipTests 

Because we will not be adding any tests in this tutorial, we included the —skipTests option to inform the CLI to skip creating a file for component tests.

In the src/app/calculator folder, the CLI created the following files:

• src/app/calculator/calculator.component.css for CSS styles.
• src/app/calculator/calculator.component.html for the component's template or the view.
• src/app/calculator/calculator.component.ts for the component logic.

Open the src/app/calculator/calculator.component.ts file:

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

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

The CalculatorComponent class knows about the template and CSS file thanks to the @Component() decorator which takes the following metadata:

• selector that allows us to give the component a tag name that can be used to reference the component from other templates just like standard HTML tags.
• templateUrl that points to the HTML template that renders the view of the component. You can also use an inline template with the template property instead.
• styleUrls that allows us to associate one or multiple stylesheets to our component.

Since we didn't include routing in our application, we need a way to access our calculator component from our root component. That's where the selector property of the component comes handy - we can call our calculator component using the <app-calculator> tag. Open the src/app/app.component.html file, remove the existing content and add:

<app-calculator></app-calculator>

Creating our Calculator UI

We'll be using the HTML and CSS code from the following JS fiddle to create our calculator UI:

Open the src/app/calculator/calculator.component.html file and add the following code:

<div class="calculator">

  <input type="text" class="calculator-screen" value="0" disabled />

  <div class="calculator-keys">

    <button type="button" class="operator" value="+">+</button>
    <button type="button" class="operator" value="-">-</button>
    <button type="button" class="operator" value="*">&times;</button>
    <button type="button" class="operator" value="/">&divide;</button>

    <button type="button" value="7">7</button>
    <button type="button" value="8">8</button>
    <button type="button" value="9">9</button>


    <button type="button" value="4">4</button>
    <button type="button" value="5">5</button>
    <button type="button" value="6">6</button>


    <button type="button" value="1">1</button>
    <button type="button" value="2">2</button>
    <button type="button" value="3">3</button>


    <button type="button" value="0">0</button>
    <button type="button" class="decimal" value=".">.</button>
    <button type="button" class="all-clear" value="all-clear">AC</button>

    <button type="button" class="equal-sign" value="=">=</button>

  </div>
</div>

Next, open the src/app/calculator/calculator.component.css file and add the following CSS styles:

We also need to add some global styling so open the src/styles.css file and add:

html {
    font-size: 62.5%;
    box-sizing: border-box;
  }

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}  

Now, go to your web browser and go to your app, you should see the following interface:

We must now utilize Angular magic to convert this template into a functional calculator.

Conclusion

In this first part, we created our Angular 15 calculator application. In the next tutorial, we'll use Angular data binding to make a working calculator.

• Author: Ahmed Bouchefra Follow @ahmedbouchefra

• Date: 20 Nov 2022