Angular - Basic Example

Previous
Quiz
Next

In this tutorial, we will learn complete step-by-step working of an angular application. This chapter is part of the Angular Tutorial. We recommend you go through all the previous chapters before moving ahead in this chapter. We have covered all angular concepts from beginner to advanced.

Let us create an Angular application to check our day-to-day expenses. Let us give ExpenseManager as our choice for our new application.

We are going to implement the following concepts of Angular in our application −

Setting up the Angular Application

Use the below command to create the new application −

cd /path/to/workspace
ng new expense-manager

Here,

new is one of the commands of the ng CLI. It is used to create new applications. It will ask some basic questions in order to create a new application. It is enough to let the application choose the default choices.

Once the basic questions are answered, a new Angular application will be created with the name expense-manager.

Let us move into the our newly created application folder using the following command −

cd expense-manager

Let us start the application using the below command −

ng serve

The application will start on the http://localhost:4200 port. Change the title of the application to better reflect our application. Open src/app/app.component.ts and rename the title as specified below −

export class AppComponent { 
   title = 'Expense Manager';
}

Our final application will be rendered in the browser as shown below −

angular application

Add a Component

To create a new component, we use ng generate component command. Write this command in Angular CLI as shown below −

ng generate component expense-entry

On running the above command, following output will be displayed in CLI −

CREATE src/app/expense-entry/expense-entry.component.html (29 bytes)
CREATE src/app/expense-entry/expense-entry.component.spec.ts (658 bytes)
CREATE src/app/expense-entry/expense-entry.component.ts (273 bytes)
CREATE src/app/expense-entry/expense-entry.component.css (0 bytes)

Here,

  • ExpenseEntryComponent is created under src/app/expense-entry folder.
  • Component class, Template and style sheet are created.

Add title property to ExpenseEntryComponent. Its path is as follows: src/app/expense-entry/expense-entry.component.ts.

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

@Component({
   selector: 'app-expense-entry',
   standalone: true,
   imports: [],
   templateUrl: './expense-entry.component.html',
   styleUrl: './expense-entry.component.css'
})
export class ExpenseEntryComponent implements OnInit {
   title: string = "";
   constructor() { }
   
   ngOnInit() {
      this.title = "Expense Entry"
   }
}

Update template, src/app/expense-entry/expense-entry.component.html with below code −

<p>{{ title }}</p>

Open src/app/app.component.html and include newly created component in it.

<h1>{{ title }}</h1>
<app-expense-entry></app-expense-entry>

Here,

app-expense-entry is the selector value and it can be used as regular HTML Tag.

We also need to import this component inside imports[] array of @component decorator.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ExpenseEntryComponent } from './expense-entry/expense-entry.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ExpenseEntryComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Expense Manager';
}

The output of the application is as shown below −

HTML Tag example app

Adding Bootstrap

Let's include Bootstrap into our ExpenseManager application using styles option and change the default template to use bootstrap components. Open CLI and go to ExpenseManager application using the below command −

cd expense-manager

Install bootstrap and JQuery library using below commands −

npm install --save bootstrap jquery

To read more about using bootstrap in angular application, we recommend checking this chapter: Adding Bootstrap in Angular.

Now, open angular.json file and set bootstrap and jquery library path −

{ 
   "projects": { 
      "expense-manager": { 
         "architect": { 
            "build": {
               "builder":"@angular-devkit/build-angular:browser", "options": { 
                  "outputPath": "dist/expense-manager", 
                  "index": "src/index.html", 
                  "main": "src/main.ts", 
                  "polyfills": "src/polyfills.ts", 
                  "tsConfig": "tsconfig.app.json", 
                  "aot": false, 
                  "assets": [ 
                     "src/favicon.ico", 
                     "src/assets" 
                  ], 
                  "styles": [ 
                     "./node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.css" 
                  ], 
                  "scripts": [ 
                     "./node_modules/jquery/dist/jquery.js", "./node_modules/bootstrap/dist/js/bootstrap.js" 
                  ] 
               }, 
            }, 
         } 
   }}, 
   "defaultProject": "expense-manager" 
}

Here,

scripts option is used to include JavaScript library. JavaScript registered through scripts will be available to all Angular components in the application.

Open app.component.html and change the content as specified below −

<!-- Navigation --> 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top"> 
   <div class="container"> 
      <a class="navbar-brand" href="#">{{ title }}</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
         <span class="navbar-toggler-icon">
         </span> 
      </button> 
      <div class="collapse navbar-collapse" id="navbarResponsive"> 
         <ul class="navbar-nav ml-auto"> 
            <li class="nav-item active"> 
            <a class="nav-link" href="#">Home
               <span class="sr-only">(current)
               </span>
            </a> 
            </li> 
            <li class="nav-item"> 
            <a class="nav-link" href="#">Report</a> 
            </li> 
            <li class="nav-item"> 
            <a class="nav-link" href="#">Add Expense</a> 
            </li> 
            <li class="nav-item"> 
            <a class="nav-link" href="#">About</a> 
            </li> 
         </ul> 
      </div> 
   </div> 
</nav> 
<app-expense-entry></app-expense-entry>

Here, we have used bootstrap navigation and containers.

Open src/app/expense-entry/expense-entry.component.html and place below content.

<!-- Page Content --> 
<div class="container"> 
   <div class="row"> 
      <div class="col-lg-12 text-center" style="padding-top: 20px;"> 
         <div class="container" style="padding-left: 0px; padding-right: 0px;"> 
            <div class="row"> 
            <div class="col-sm" style="text-align: left;"> {{ title }} 
            </div> 
            <div class="col-sm" style="text-align: right;"> 
               <button type="button" class="btn btn-primary">Edit</button> 
            </div> 
            </div> 
         </div> 
         <div class="container box" style="margin-top: 10px;"> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;">  
            <strong><em>Item:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            Pizza 
         </div>
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;">
            <strong><em>Amount:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            20 
         </div> 
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;"> 
            <strong><em>Category:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            Food 
         </div> 
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;"> 
            <strong><em>Location:</em></strong>
         </div> 
         <div class="col" style="text-align: left;"> 
            Zomato 
         </div> 
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;"> 
            <strong><em>Spend On:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            June 20, 2020 
         </div> 
         </div> 
      </div> 
   </div> 
</div> 
</div>

Now, you can see the updated output which is as follows −

Angular Bootstrap app

Add an Interface

Create ExpenseEntry interface within src/app/expense-entry.component.ts file and add id, amount, category, Location, spendOn and createdOn. Also, create an object of ExpenseEntry object. The updated code will look like −

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

export interface ExpenseEntry {
  id: number;
  item: string;
  amount: number;
  category: string;
  location: string;
  spendOn: Date;
  createdOn: Date;
}

@Component({
  selector: 'app-expense-entry',
  standalone: true,
  imports: [],
  templateUrl: './expense-entry.component.html',
  styleUrl: './expense-entry.component.css'
})
export class ExpenseEntryComponent implements OnInit {
  title: string = "";
  expenseEntry!: ExpenseEntry;
  constructor() { }

  ngOnInit() {
     this.title = "Expense Entry";
     this.expenseEntry = {

      id: 1,
      item: "Pizza",
      amount: 21,
      category: "Food",
      location: "Zomato",
      spendOn: new Date(2025, 6, 1, 10, 10, 10),
      createdOn: new Date(2025, 6, 1, 10, 10, 10),
   };
  }
}

Update the component template also, src/app/expense-entry/expense-entry.component.html with the code specified below −

<!-- Page Content -->
<div class="container">
   <div class="row">
      <div class="col-lg-12 text-center" style="padding-top: 20px;">
         <div class="container" style="padding-left: 0px; padding-right: 0px;">
            <div class="row">
               <div class="col-sm" style="text-align: left;">
                  {{ title }}
               </div>
               <div class="col-sm" style="text-align: right;">
                  <button type="button" class="btn btn-primary">Edit</button>
               </div>
            </div>
         </div>
         <div class="container box" style="margin-top: 10px;">
            <div class="row">
               <div class="col-2" style="text-align: right;">
                  <strong><em>Item:</em></strong>
               </div>
               <div class="col" style="text-align: left;">
                  {{ expenseEntry.item }} 
               </div>
            </div>
            <div class="row">
               <div class="col-2" style="text-align: right;">
                  <strong><em>Amount:</em></strong>
               </div>
               <div class="col" style="text-align: left;">
                  {{ expenseEntry.amount }}   
               </div>
            </div>
            <div class="row">
               <div class="col-2" style="text-align: right;">
                  <strong><em>Category:</em></strong>
               </div>
               <div class="col" style="text-align: left;">

                  {{ expenseEntry.category }} 
               </div>
            </div>
            <div class="row">
               <div class="col-2" style="text-align: right;">
                  <strong><em>Location:</em></strong>
               </div>
               <div class="col" style="text-align: left;">
                  {{ expenseEntry.location }} 
               </div>
            </div>
            <div class="row">
               <div class="col-2" style="text-align: right;">
                  <strong><em>Spend On:</em></strong>
               </div>
               <div class="col" style="text-align: left;">
                  {{ expenseEntry.spendOn }}  
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

The output of the application is as follows −

Angular Interface

Using ngFor Directive

Let's add a new component in our ExpenseManager application to list the expense entries.

Create a new component, ExpenseEntryList using below command −

ng generate component ExpenseEntryList

The output is as follows −

CREATE src/app/expense-entry-list/expense-entry-list.component.html (34 bytes)
CREATE src/app/expense-entry-list/expense-entry-list.component.spec.ts (687 bytes)
CREATE src/app/expense-entry-list/expense-entry-list.component.ts (292 bytes)
CREATE src/app/expense-entry-list/expense-entry-list.component.css (0 bytes)

Here, the command creates the ExpenseEntryList Component and add the necessary code by default.

Create the same ExpenseEntry interface within src/app/expense-entry-list.component.ts file. Then, add a method named getExpenseEntries() to return list of expense entry (mock items) in ExpenseEntryListComponent. Also, declare a local variable, expenseEntries and load the mock list of expense entries.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';

export interface ExpenseEntry {
   id: number;
   item: string;
   amount: number;
   category: string;
   location: string;
   spendOn: Date;
   createdOn: Date;
}

@Component({
   selector: 'app-expense-entry-list',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './expense-entry-list.component.html',
   styleUrl: './expense-entry-list.component.css'
})
export class ExpenseEntryListComponent {
   getExpenseEntries() : ExpenseEntry[] { 
     let mockExpenseEntries : ExpenseEntry[] = [ 
        { id: 1, 
           item: "Pizza", 
           amount: Math.floor((Math.random() * 10) + 1), 
           category: "Food", 
           location: "Mcdonald", 
           spendOn: new Date(2020, 4, Math.floor((Math.random() * 30) + 1), 10, 10, 10), 
           createdOn: new Date(2020, 4, Math.floor((Math.random() * 30) + 1), 10, 10, 10) }, 
        { id: 1, 
           item: "Pizza", 
           amount: Math.floor((Math.random() * 10) + 1), 
           category: "Food", 
           location: "KFC", 
           spendOn: new Date(2020, 4, Math.floor((Math.random() * 30) + 1), 10, 10, 10), 
           createdOn: new Date(2020, 4, Math.floor((Math.random() * 30) + 1), 10, 10, 10) }, 
        { id: 1,
           item: "Pizza",
           amount: Math.floor((Math.random() * 10) + 1), 
           category: "Food", 
           location: "Mcdonald", 
           spendOn: new Date(2020, 4, Math.floor((Math.random() * 30) + 1), 10, 10, 10), 
           createdOn: new Date(2020, 4, Math.floor((Math.random() * 30) + 1), 10, 10, 10) }, 
        { id: 1, 
           item: "Pizza", 
           amount: Math.floor((Math.random() * 10) + 1), 
           category: "Food", 
           location: "KFC", 
           spendOn: new Date(2020, 4, Math.floor((Math.random() * 30) + 1), 10, 10, 10), 
           createdOn: new Date(2020, 4, Math.floor((Math.random() * 30) + 1), 10, 10, 10) }, 
        { id: 1, 
           item: "Pizza", 
           amount: Math.floor((Math.random() * 10) + 1), 
           category: "Food", 
           location: "KFC", 
           spendOn: new Date(2020, 4, Math.floor((Math.random() * 30) + 1), 10, 10, 10), 
           createdOn: new Date(2020, 4, Math.floor((Math.random() * 30) + 1), 10, 10, 10) 
        }, 
     ]; 
     return mockExpenseEntries; 
   }
   title: string =""; 
   expenseEntries!: ExpenseEntry[]; 
   constructor() { } 
   ngOnInit() { 
      this.title = "Expense Entry List"; 
      this.expenseEntries = this.getExpenseEntries(); 
   }
}

Open the template file, src/app/expense-entry-list/expense-entry-list.component.html and show the mock entries in a table.

<!-- Page Content -->
<div class="container"> 
   <div class="row"> 
      <div class="col-lg-12 text-center" style="padding-top: 20px;">
         <div class="container" style="padding-left: 0px; padding-right: 0px;"> 
            <div class="row"> 
               <div class="col-sm" style="text-align: left;"> 
                  {{ title }} 
               </div> 
               <div class="col-sm" style="text-align: right;"> 
                  <button type="button" class="btn btn-primary">Edit</button> 
               </div> 
            </div> 
         </div> 
         <div class="container box" style="margin-top: 10px;"> 
            <table class="table table-striped"> 
               <thead> 
                  <tr> 
                     <th>Item</th> 
                     <th>Amount</th> 
                     <th>Category</th> 
                     <th>Location</th> 
                     <th>Spent On</th> 
                  </tr> 
               </thead> 
               <tbody> 
                  <tr *ngFor="let entry of expenseEntries"> 
                     <th scope="row">{{ entry.item }}</th> 
                     <th>{{ entry.amount }}</th> 
                     <td>{{ entry.category }}</td> 
                     <td>{{ entry.location }}</td> 
                     <td>{{ entry.spendOn | date: 'short' }}</td> 
                  </tr> 
               </tbody> 
            </table> 
         </div> 
      </div> 
   </div> 
</div>

Here,

  • Used bootstrap table. table and table-striped will style the table according to Boostrap style standard.

  • Used ngFor to loop over the expenseEntries and generate table rows.

Open AppComponent template, src/app/app.component.html and include ExpenseEntryListComponent and comment the ExpenseEntryComponent as shown below −

... 
<!-- <app-expense-entry></app-expense-entry> -->
<app-expense-entry-list></app-expense-entry-list>

Import the component inside AppComponent −

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ExpenseEntryListComponent } from './expense-entry-list/expense-entry-list.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ExpenseEntryListComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Expense Manager';
}

Finally, run the application. The output of the application is as shown below −

expense entry list Component

Use of Pipes

Let us use the pipe in the our ExpenseManager application

Open ExpenseEntryListComponent's template, i.e., src/app/expense-entry-list/expense-entry-list.component.html and include pipe in entry.spendOn as mentioned below −

<td>{{ entry.spendOn | date: 'short' }}</td>

Here, we have used the date pipe to show the spend on date in the short format.

Finally, the output of the application is as shown below −

Pipes
Print Page
Previous
Next
Advertisements