Introduction

Angular

Angular is a leading, powerful, and widely-used frontend framework for building single-page applications (SPAs). Built and maintained by Google, Angular is written in TypeScript and supports building mobile, desktop, and web applications. As of Angular 21 (released November 19, 2025), the framework features Signals as the primary reactive primitive, standalone components as the default, and zoneless change detection out of the box - making it faster and simpler than ever.

Benefits of Angular

• Angular is a component-based framework that gives a clean, scalable structure for applications.
• It has declarative templates with lots of reusable code and built-in control flow syntax.
• Angular is written in TypeScript, providing strong typing and excellent tooling support.
• Signals provide a simple and efficient reactive state model, replacing the need for Zone.js.
• Standalone components eliminate the need for NgModules in new applications, simplifying the architecture.
• Zoneless change detection (default in Angular 21) improves performance and reduces bundle size.
• Built-in accessibility support via the @angular/aria package.
• Angular code is highly testable, with Vitest as the default test runner in Angular 21.

Angular CLI

The Angular CLI is a command-line interface tool that helps you initialize, develop, scaffold, and maintain Angular applications. In Angular 21, running ng new my-project creates a standalone application by default - no NgModule required. You can use the CLI directly in a terminal or through an interactive UI such as Angular Console.

Step 1:- To start with creating an Angular CLI application, first install Node.js (version 20.19.0 or higher is required for Angular 21).

Step 2:- Install Angular CLI by running the below command-

											npm install -g @angular/cli
											

Step 3:- Now, to create an Angular application, just run the below command-

											ng new my-project // To create an angular applicaion
											cd my-project // Navigate to project folder i.e. my-project
											ng serve // To run the applicaion
											

Our newly created app will look like below (Angular 21 - Default Project Structure):-

											import { Component } from '@angular/core';
											
											@Component({
												selector: 'app-root',
												templateUrl: './app.component.html',
												styleUrls: ['./app.component.css']
											})
											
											export class AppComponent {
												title = 'my-first-project';
											}
											

											
											<div style="text-align:center">
											    <h1>Welcome to {{ title }}!</h1>
											</div>
											

											h1 {
												color: green;
											}
											

											import { BrowserModule } from '@angular/platform-browser';
											import { NgModule } from '@angular/core';
											import { AppComponent } from './app.component';
											
											@NgModule({
												declarations: [
												    AppComponent
												],
												imports: [
												    BrowserModule
												],
												providers: [],
												bootstrap: [
												    AppComponent
												]
											})
											
											export class AppModule { }
											

											import { TestBed, async } from '@angular/core/testing';
											import { AppComponent } from './app.component';
											
											describe('AppComponent', () => {
												beforeEach(async(() => {
													TestBed.configureTestingModule({
														declarations: [
														    AppComponent
														],
													}).compileComponents();
												}));
												
												it('should create the app', () => {
													const fixture = TestBed.createComponent(AppComponent);
													const app = fixture.debugElement.componentInstance;
													expect(app).toBeTruthy();
												});
												
												it(`should have as title 'my-first-project'`, () => {
													const fixture = TestBed.createComponent(AppComponent);
													const app = fixture.debugElement.componentInstance;
													expect(app.title).toEqual('my-first-project');
												});
												
												it('should render title in a h1 tag', () => {
													const fixture = TestBed.createComponent(AppComponent);
													fixture.detectChanges();
													const compiled = fixture.debugElement.nativeElement;
													expect(compiled.querySelector('h1').textContent).toContain('Welcome to my-first-project!');
												});
											});
											

Some important CLI commands:-

What's New in Angular 21

• Zoneless by Default: Angular 21 uses zoneless change detection out of the box. Zone.js is no longer required for new applications.
• Signal Forms (Experimental): A new form API built on Signals via the @angular/forms/signals package, offering better type safety and simpler validation.
• Vitest as Default Test Runner: Vitest replaces Karma and Jasmine as the standard test runner for new Angular projects.
• @angular/aria Package: A new package providing accessible component directives for common WAI-ARIA patterns.
• HttpClient Auto-provided: HttpClient is now available in the root injector by default - no need to call provideHttpClient().
• AI-First Tooling: Built-in MCP server and AI config generation for Claude, Copilot, Cursor, and Gemini.