What is Angular?

What is Angular?

Angular is built on Typescript and backed by Google. It was released in the year of Sept 2016. Basically, it helps to extend HTML vocabulary.

Angular can be best described by the below points

• Cross-platform
• Complete package of well-integrated libraries, like forms, routing, testing, tooling, accessibility, etc.
• Rich and vibrant ecosystem (Angular Material, NgbBootstrap, PrimeNg, AgGrid, NgRx, Nest, Ionic)
• It provides a suite of tools that helps to build, test, automate, and update code.

Why Do You Need a Web Framework?

Frontend frameworks play a vital role in development. They are mainly based on opinionated principles. It automates most of the manual work and implicitly encourages developers to focus on the actual elements of the project. A good framework comes with features of consistency, functionality, documentation, easy upgrades, a vibrant community, and a complete suite (out-of-the-box support for the router, templating, compiler, builder, SSR, API, etc.).

Common use cases are already built-in into the framework. The developer just has to consume these functionalities; no need to reinvent the wheel. Another benefit of using a framework is that it provides the best environment for the team because each team member follows common principles. In other words, the framework can make it faster and more organized.

The Need of Angular

Just now, we've seen that using the framework for development can reduce a lot of repetitive tasks. There are a lot of great things where it shines.

Now we will look at each of them in brief:

• Modularity - Angular modularise applications by segregating code base into Component, Directive, Pipe, Service, Template, and NgModule.
• Trust - Backed by Google. Google internally uses Angular on 2000+ applications, any commit that happens on the Angular repository is internally deployed first on Google Projects. That means whatever new released happens is already well-tested within Google.
• Declarative UI - You would be creating Components, Directives, Pipes, and Services. And that will be used declaratively to achieve the desired behavior.
• Wide spectrum - Support for building PWA, WebComponents, and Hybrid Apps out of the box
• Component Dev Kit (CDK) - The Component Dev Kit (CDK) is a set of behavior primitives for building its own UI components. The Angular Material team has extracted highly reusable component building blocks, and this can be extended to suffice specific application needs.
• Testing - Framework provides out-of-the-box support for Jasmine and Protractor.
• Keep Evolving - Angular team is working on making angular smaller and faster. Recently Angular v14 released typed forms, standalone components(dev preview), inject API, etc. These features are taking angular to another level.

Angular applications: The Essentials

Angular is a framework for building highly performant applications using HTML and TypeScript. Its architecture relies on certain fundamental concepts like Components, Directives, Bindings, etc.

Components

Components are the building block of an application. The whole application can be considered components, and the tree can be drawn to represent the application. In angular, you can create a component with a template, CSS, and typescript file. You have to use CLI to generate a component ng generate component componentName. To declare a component, we have to write the @Component decorator on top of the class, and its selector can be used in HTML.

HTML

The component selector app-hello has to be used on the HTML like <app-hello></app-hello>. Angular framework renders the template inside the selector DOM Hello {{ name }}. While doing that, it evaluates the {{name}} expression wrt instantiated HelloWorldComponent class context. Thus, you can see it prints Hello World on HTML.

Templates

In Angular, a template is a small part of HTML. Use special syntax within a template to build on many of Angular's features. It is a layout / Skelton of a specific feature. It takes the shape of data as you pass in.

The template can be part of  - Component  - Directive  - ng-template

Directives

The directive is used to add behavior on top of the DOM. The behavior can be anything. For e.g., on hover display popover, two-way binding, styling, drag, drop, etc. To understand the directives with an example, we will see the angular built-in ngStyle directive.

Output

You can see after evaluation of the expression present inside the [ngStyle] directive, it added a style attribute with the value color: red;.

Interpolation, Property Binding, Event Binding

Let's try to build a simple counter. The requirement is pretty straightforward, and when we click on the button, it shall increment the counter value and should reflect the updated value on the screen.

Let's try to understand the above HTML. We have a button Increment Counter. On click of the same, it increments the counter value.

Can you see there are some unusual things that have been used on the given template, like {{counter}}, (click)="counter = counter + 1" and [value]="counter". Don't worry, we will look at them and what exactly they are doing there.

Interpolation - Represented as {{}}

• It contains an expression or variable that is evaluated with instantiated component context.
• Display the evaluated value on HTML.
• Re-evaluate expression/value when any changes happen.

Event Binding - represented by ()

• Add events on DOM by adding eventName as an attribute wrapped with parenthesis. For eg. (click), (change), etc.
• Inside the attribute value, you can pass either expression or methodName, that evaluated the w.r.t component. For eg. (click)="show = !show" OR (change)="update()"
• When an event is triggered, expression is evaluated and bindings are re-sync.

Property Binding - represented as []

• Property binding targets to either DOM property or Input properties(we will look at this in the Components chapter).
• Add propertyName as an attribute wrapped with square brackets. For eg. [value], [style], etc.
• Inside the attribute value, you can pass either expression or method name, which will evaluated the w.r.t component. For eg. [value]="myModelValue" OR [style]="{background: 'green'}"
• It keeps DOM/Input property in sync by evaluating expressions.

Let's assume the requirement where you've to print array elements on HTML. You may simply do that in a below way.

Using Javascript

Output

Fantastic, it was quite straightforward to achieve this imperative way using plain JavaScript. But there is a catch, what if the items variable is updated? We've manually added new/all elements into the DOM. That sounds okay, and there should be a way we can do this optimally and with less code. Let's see how we achieve the same with Angular using *ngFor built-in directive

*ngFor

Whoa! Did you see how simple that was with Angular? Let's understand what exactly we did. Primarily, we defined the Angular component with the template. We simply wrote a ul and li structure in the template. Now look back in the Javascript way; we've used simple JS for loop where it said let item of items. We have to use exact expression for *ngFor directive value like *ngFor="let item of items". And then inside li, we've used {{ item }} which takes care of displaying the value. Fantastic!

But there is more than that, we get a bonus for using Angular. Eventually, any updates on the items variable would be reflected in HTML quickly.

*ngIf

There is another in-built directive you would be using heavily. The *ngIf directive helps to display an HTML element conditionally. Let's try to understand the *ngIf directive with an example. Let's consider an example where you want to display an element on HTML when the show variable value is true.

In the above example, we have a button; on click of the button expression show != show is executed. It toggles the value of the show property. And if the show value is true "Show Content" text is displayed on HTML, and in another case, "Show Content" from the DOM tree.

What are the Different Angular Versions?

AngularJS was released back in Oct 2010. And later, in Sept 2016, Google launched the Angular framework, the successor of the AngularJS framework. A few things have been rewritten at the core of the framework. Angular v2+ is almost equivalent in terms of concept. Even a person who knows Angular v2 won’t have to re-learn concepts to work on Angular v14. The same is not true for AngularJS.

Don’t get confused with AngularJS and Angular terms. Over the years community agreed to the below terminology.

Terminology  AngularJS - AngularJS v1.x  Angular - Angular v2+

Hence moving forward we will be using Angular in our articles.

Features of Angular

There are compiled list of interesting features which represent Angular as a unique framework.

DOM (Document Object Model)

It's a representation of an HTML node; it contains information in specific standards. Javascript can use this object to process information or manipulate the HTML structure. A collection of nodes represented together can be called a DOM tree. You can query HTML to select a particular node from the DOM tree.

Typescript

Complete Angular framework is built with Angular. It is a primary language for Angular application development. Typescript has really made Angular to be typesafe in every aspect, like typed templates, typed forms, and everything else.

Data Binding

Data binding is a way to keep component data in sync on the view. In the angular component, both the template and the associated instantiated class are linked. So each time when any changes happen on the property, it updates the view and vice versa.

Testing

Most application requires unit tests and E2E tests. Angular provides out-of-the-box support for Jasmine and Protractor. You can use them for writing tests. Although, you can also use Cypress, Jest and testing-library to test your components and perform e2e test.

Dependency Injection

Dependency Injection is the core concept of Angular. It is a design pattern where it delegates object creation responsibility to the Dependency Injection (DI) container. DI container is nothing but contains the binding of dependency with its implementation. We have already covered more on this topic in detail in Service in Angular chapter.

Angular CLI

The Angular CLI is a command-line interface tool that helps developer to minimize their work by automating most of the stuff. Some of the CLI commands below

First Party libraries

Below is the list of libraries that are part of the framework

Advantages of Angular

• Enterprise-level standards for developers.
• Architecture and structure are enforced by design.
• Most of the stuff is already automated like creating scaffold files, build, test, deploy, etc.
• Migration to a newer version is super easy, just by running the ng update command.

Limitation of Angular

Every framework has some pros and cons, hence angular has too. Below I've listed a few limitations,

• Large bundle size
• Managing Dynamic components
• For static applications serving static content, angular can be too much for such applications.
• Less decision fatigue, because needful primary things exist inside a framework

Companies using Angular

Angular is widely used by many big companies, below is the curated list of few of them

1. AdSense
2. Google Cloud
3. Google (Internal 2000+ apps)
4. Startlink Tesla
5. Deutsche Bank
6. DBS Bank
7. ClickUp
8. IRCTC
9. Cowin
10. CapitalOne
11. Delta Airlines
12. Air France
13. T-Mobiles
14. Mustakbil

Additional Resource

1. Interview Questions on Angular