Angular Tutorial

This Angular tutorial starts with the architecture of Angular, setting up a simple project, and data binding, then walks through forms and templates and explains Angular’s new features. This tutorial is designed for beginners and experienced developers who want to learn Angular from scratch or enhance their skills.

What is Angular?

Angular is an open source, TypeScript based front end web application framework. It has been released by Google’s Angular community.

Angular provides a large collection of tools, APIs, and libraries to build dynamic and interactive single-page applications (SPAs) with ease. It helps maintain an organized and scalable codebase, thanks to its component model and flexible dependency injection system.

Angular Example

In this example, we will write a Hello World! program in Angular. For this, create an Angular application and navigate to src folder. Inside this folder, you will find the app.component.html and app.component.ts files. Copy and paste the following code inside those files:

app.component.ts

import { Component } from ‘@angular/core’;
import { RouterOutlet } from ‘@angular/router’;
@Component({
selector: ‘app-root’,
standalone: true,
imports: [RouterOutlet],
templateUrl: ‘./app.component.html’,
styleUrl: ‘./app.component.css’ })
export class AppComponent {
title = ‘Hello World App’;
}

app.component.html

<h3>{{title}}</h3>
<p>Hello World!</p>

On running this application, you will get the following result

angular hello world program

Angular – Overview

Angular is a TypeScript based full-stack web framework for building web and mobile applications. One of the major advantages is that Angular support for web applications that can fit in any screen resolution. Angular application is fully compatible with mobiles, tablets, laptops or desktops. Angular has an excellent user interface library for web developers which contains reusable UI components.

This functionality helps us to create Single Page Applications (SPA). SPA is a reactive and fast application. For example, if you have a button in single page and click on the button then the action performs dynamically in the current page without loading the new page from the server. Angular is a TypeScript-based framework that supports object-oriented programming and includes features for server-side rendering as well.

Comparison of angular versions

As we know already, Google releases the version of Angular for the improvement of mobile and web development capabilities. All the released versions are backwards compatible and can be updated easily to the newer version. Lets go through the comparison of released versions.

Version & Release Date Description

AngularJS (October 2010)

AngularJS is based on Model View Controller (MVC) architecture and automatically handles JavaScript code suitable for each browser.

Angular 2.0 (September 2016)

It is a re-engineered and rewritten version of AngularJS. AngularJs had a focus on controllers but, version 2 has changed the focus on components. Components are the main building block of application. It supports features for speed in rendering, updating pages and building cross-platform native mobile apps for Google Android and iOS.

Angular 4.0 (March 2017)

Features −

  • Updated to TypeScript 2.2
  • Supports ng if-else conditions whereas Angular 2 supports only if conditions
  • Introduces animation packages
  • Http search parameters

Angular 5.0 (November 2017)

It supported some of the salient features such as HTTPClient API, Lambda support, Improved Compiler and build optimizer.

Angular 6.0 (May 2018)

Features added to this version are −

  • Updated Angular CLI
  • Updated CDK
  • Updated Angular Material
  • Multiple validators
  • Usage of reactive JS library

Angular 7.0 (October 2018)

Some salient features of this version of Angular are −

  • Google supported community
  • POJO based development
  • Modular structure
  • Declarative user interface

Angular 8.0 (May 2019)

Angular 8.0 comes up with the following new attractive features −

  • Bazel support: If your application uses several modules and libraries, Bazel concurrent builds help to load faster in your application.

  • Lazy loading: Angular splits AppRoutingModule into smaller bundles and loads the data in the DOM.

  • Differential loading: When you create an application, Angular CLI generates modules and this will be loaded automatically, and then the browser will render the data.

  • Web worker: It is running in the background, without affecting the performance of a page.

  • Improvement of CLI workflow: Angular CLI commands ng-build, ng-test and ng-run are extended to third-party libraries.

  • Router Backward Compatibility: The angular router backward compatibility feature helps to create paths for larger projects so user can easily add their coding with the help of lazy coding.

  • Opt-in usage sharing: The user can opt-in to share Angular CLI usage data.

Angular 9.0 (February 2020)

With this new update, drawbacks of the previous versions were modified and various new features were added which include −

  • Ivy Compiler
  • Support for TypeScript 3.7
  • An update on the API extractor

Angular 10.0 (June 2020)

It brings a range of new features and improvements which are listed below −

  • Updated version of Ivy Compiler was released that was introduced in Angular 9.0.
  • Support for TypeScript 3.9.
  • Improvement in lazy loading and differential loading.

Angular 11.0 (November 2020)

It gets an updated Hot Module Replacement support that allows the modules to be replaced without a full browser refresh. Another major update was the automatic inlining of fonts. It converts your Google Fonts and Icon to inline in index.html.

Angular 12.0 (May 2021)

The different improvements introduced with the release of this version of the Angular framework are described below −

  • Improvement of the Testing support
  • Performance improvement
  • Introduced support for TypeScript 4.2

Angular 13.0 (November 2021)

Angular 13.0 introduces a new strict mode that gives improved error messages and helps to find common mistakes. Additionally, it updated dependencies for TypeScript 4.4, RxJS 7, and Zone.js 0.11.

Angular 14.0 (June 2022)

Like other versions, it also comes with several new features and bug fixes. Introducing a Standalone component that eliminated the need to use NgModules, typed forms and auto completion in Angular CLI are some notable changes.

Angular 15.0 (November 2022)

Angular v15 introduces several significant improvements −

  • A stable version of standalone components and NgOptimizedImage directive.
  • Improved the dependency injection feature.
  • Introduced a new JavaScript bundler named ESBuild.
  • Discontinues support for certain Node.js versions.
  • Using TypeScript version 4.8 or later becomes mandatory.

Angular 16.0 (May 2023)

This new release of Angular includes developer previews for new reactivity primitives (signal, computed, and effect), enhanced hydration for better page load performance, and faster builds with ESBuild integration. It also supports standalone component migration and scaffolding. Now, developers require Node.js v16 or v18 and TypeScript v4.9 or later. The Angular v16 removes the Angular Compatibility Compiler (ngcc) which means libraries built with View Engine are no longer supported.

Angular 17.0 (November 2023)

The Angular v17 was launched with certain new features including −

  • Deferrable Views
  • Built-in Control Flow
  • Better handling of lazy-loaded routes.
  • New @angular/ssr Package for improved SSR (Server-Side Rendering).
  • New lifecycle hooks.

Angular 18.0 (May 2024)

Features added to the new version of Angular is given below −

  • HttpClientModule is now deprecated.
  • Added an experimental features named “Zone-less Change Detection”.
  • Introduced support for TypeScript 5.4.
  • Release of Observable Router and Redirects.
 

Angular 19 new Features

Angular 19 comes up with the following new attractive features −

  • Supports TypeScript 5.6: Now, developers can use the latest version of TypeScript in their Angular applications.

  • Standalone: From this version of Angular, standalone is the default behaviour. Standalone means an independent component, directive or pipe that can be used without the need for a module.

  • Detecting unused imports: A new feature of detecting unused imports in standalone components is added to the Angular CLI.

  • Stable Signal APIs: You can safely use Signal APIs as they are no longer in developer preview.

Apps Built with Angular

Some of the popular websites built using Angular Framework are listed below −

  • Weather.com: It is one of the leading forecasting weather report websites.

  • Youtube: It is a video and sharing website hosted by Google.

  • Netflix: It is a technology and media services provider.

  • PayPal: It is an online payment system.

Difference between Angular and AngularJs

The table below describes the difference between Angular and AngularJS −

Angular AngularJS

Angular is based on TypeScript language.

AngularJS is based on JavaScript language.

All the popular mobile browsers support Angular.

Mobile browsers do not support AngularJS.

It has the feature of dependency injection.

It does not support dependency injection.

Angular has CLI tool.

CLI tool is not available in AngularJS.

It has component based structure.

It has MVC (Model View Controller) based architecture.

Angular – Features

In this tutorial, we will explore the features of Angular and understand how this framework is different from other JavaScript frameworks. Features in simple term refers to the distinct functionalities and characteristics of any application, library or framework that helps to fulfill user requirements.

features of Angular

Features of Angular framework

The list of features Angular framework provides is as follows −

  • TypeScript based framework
  • Reactive framework
  • Component based architecture
  • Module based design
  • Efficient and performant template engine
  • Lot of Inbuilt directives to enhance the template engine
  • Easy to create custom directives to extend the features of template engine
  • Pipes to add helper functions into the template engine
  • Automatic data binding
  • Efficient and performance routing engine
  • Easy to use dependency injection framework
  • Support modern HTTP and CSS functionality
  • Support CSS preprocessor
  • Inbuilt support for HTTP client
  • Supports Single page application development
  • Supports progressive web app development (PWA app)
  • Supports accessibility
  • Supports internationalization
  • Supports Server Side Rendering (SSR) through Angular Universal
  • Inbuilt End-to-End testing support
  • Support code generation through Angular CLI tools
  • Efficient and performant code building through in-house build tools

Angular – Advantages & Disadvantages

Angular was launched in 2016 as a replacement for AngularJS and within a few months, it gained popularity among developers community, especially front-end developers due to its features and ease of use. Even today, it continues to be one of the popular frameworks because Google actively maintains, improves and adds new features to it.

Despite of the numerous features Angular provides, one should be aware of the advantages and disadvantages before start learning and using it. Let’s discuss it in detail.

Advantages of Angular Framework

Following are the advantages of Angular framework −

  • TypeScript language − TypeScript provides type safety. Type safety reduces the bug by catching it early during the development phase and helps to create high quality application.

  • Full stack framework − Angular is a full stack framework supporting both client side and server-side rendering. It supports PWA application as well. It has builtin testing framework, dependency injection, reactive programming, template engine and data binding. It bundles the code efficiently to support fast rendering in the browser.

  • Easy to learn − Since angular has all the functionality to develop a modern application, developer dont need to search, analyze and learn different libraries. Also, Angular provides extensive documentation for all the feature along with code snippets for each and every version of the angular framework.

  • Easy to start − Angular provides CLI tool to quickly start a new application with basic setting. It supports routing and CSS preprocessor configuration as well.

  • Easy to develop − Angular provides CLI tools to create new components and directive. Angular component-based architecture, module-based design, reactive programming, data binding, routing and component-based framework enables the developer to program the application faster.

  • Easy to deploy − Angular provides builtin tools to compile and deploy the application. Angular team continuously enhances the build tools to improve the developer experience.

  • Easy to test − Angular provides end to end testing framework supporting all aspect of the angular features. Developer can write the spec for each component and test it.

  • Continuous development − Angular team continuously enhance the framework and provides the update in every 6 months. They improve the framework on every aspect and develop new feature in accordance with the improvements in web development.

  • Disadvantages of Angular framework

    The list given below explains the disadvantages of the Angular framework −

    • Little support for JavaScript language − Even though TypeScript is better programming language, little support for JavaScript leads developer to learn TypeScript before starting the Angular application and delays the adaptability of the Angular framework.

    • Steep learning curve − Since angular framework has lot of builtin concepts, it took considerable time to learn all aspect of the framework.

    • Hard to specialize − Developer needs lot of time and efforts to master the angular framework to write high performance application.

    • Low options − Being a full stack framework reduces the option in choosing the best library for the given task. Developer has to content with the functionality provided by the Angular team and has to wait for their preferred functionality to be developed by Angular team.

    • Low developer tools − Compared to React, Angular has less number of developer tools for debugging, profiling and testing the application.