Angular Setup Install Create Your First App: Tutorial, Examples, FAQs & Interview Tips

What is Angular?

Angular is a powerful, open-source web application framework developed and maintained by Google. It's a complete rewrite of AngularJS (Angular 1.x) and is built using TypeScript. Angular provides a comprehensive solution for building dynamic, single-page applications (SPAs) with features like two-way data binding, dependency injection, routing, forms, HTTP client, and much more.

Angular follows the Model-View-Controller (MVC) architectural pattern and uses a component-based architecture. As of Angular 21 (the latest version), the framework has embraced standalone components by default, eliminating the need for NgModules in most cases. This makes Angular applications simpler, more modular, and easier to understand.

Why Choose Angular?

Complete Framework - Everything you need is included (routing, forms, HTTP, testing)
TypeScript-First - Strong typing, better IDE support, fewer runtime errors
Component-Based - Reusable, maintainable, and testable components
Powerful CLI - Generate components, services, and more with simple commands
Enterprise-Ready - Used by Google, Microsoft, Forbes, and many Fortune 500 companies
Excellent Documentation - Comprehensive guides and API references
Large Ecosystem - Thousands of third-party libraries and tools
Signals (Angular 16+) - Modern reactive programming with fine-grained reactivity

Prerequisites

Before starting with Angular, ensure you have the following installed and basic knowledge:

Node.js 20.19+ or 22.11+ - Download from nodejs.org (LTS version recommended)
npm - Comes bundled with Node.js (verify with npm --version)
Basic HTML, CSS, JavaScript - Understanding of web fundamentals
TypeScript basics - Familiarity with types, interfaces, and classes (optional but helpful)
Code Editor - VS Code is highly recommended with Angular extensions

Verify Node.js Installation

Check Prerequisites

# Check Node.js version (should be 20.19+ or 22.11+)
node --version
# Output: v22.11.0

# Check npm version
npm --version
# Output: 10.9.0

# If Node.js is not installed, download from nodejs.org
# Choose the LTS (Long Term Support) version

Install Angular CLI

The Angular CLI (Command Line Interface) is a powerful tool that helps you create, develop, test, and deploy Angular applications. It automates many development tasks and follows Angular best practices.

Install Angular CLI Globally

# Install Angular CLI globally (one-time setup)
npm install -g @angular/cli

# Verify installation
ng version
# Output: Angular CLI: 21.0.0 (or latest version)

# Get help on available commands
ng help

# Update Angular CLI to latest version (if already installed)
npm update -g @angular/cli

Create Your First Angular Project

Use the ng new command to create a new Angular project. The CLI will ask you a few questions about routing and styling preferences.

Create New Project

# Create a new Angular project
ng new my-first-app

# The CLI will ask:
# ? Would you like to add Angular routing? (y/N) → Press Y
# ? Which stylesheet format would you like to use? → Choose CSS (or SCSS)

# Navigate into the project directory
cd my-first-app

# Start the development server
ng serve

# Or start and automatically open in browser
ng serve --open

# The app will be available at: http://localhost:4200/

The ng serve command compiles your application, starts a development server, and watches for file changes. Any changes you make will automatically reload the browser.

Angular 21 Project Structure

Angular 21 uses standalone components by default, which simplifies the project structure by eliminating the need for NgModules in most cases.

Project Structure Explained

my-first-app/
├── node_modules/          # Dependencies (auto-generated, don't edit)
├── src/                   # Source code directory
│   ├── app/               # Application code
│   │   ├── app.component.ts      # Root component (TypeScript)
│   │   ├── app.component.html    # Root component template
│   │   ├── app.component.css     # Root component styles
│   │   ├── app.component.spec.ts # Unit tests for root component
│   │   ├── app.config.ts         # App-level configuration (replaces AppModule)
│   │   └── app.routes.ts         # Routing configuration
│   ├── assets/            # Static files (images, fonts, etc.)
│   ├── index.html         # Main HTML file
│   ├── main.ts            # Application entry point (bootstraps app)
│   └── styles.css         # Global styles
├── angular.json           # Angular CLI workspace configuration
├── package.json           # npm dependencies and scripts
├── tsconfig.json          # TypeScript compiler configuration
├── tsconfig.app.json      # TypeScript config for the app
└── README.md              # Project documentation

Key Files:
- main.ts: Bootstraps the application
- app.config.ts: Provides app-level services and configuration
- app.component.ts: Root component of your application
- app.routes.ts: Defines application routes

Understanding the Root Component (Angular 21)

In Angular 21, components are standalone by default. The root component is defined in app.component.ts and uses the new Signals API for reactive state management.

Root Component & Bootstrap

// app.component.ts - Root standalone component
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <div class="tl-container">
      <h1>{{ title() }}</h1>
      <p>Welcome to Angular 21!</p>
      
      <div class="counter">
        <p>Count: {{ count() }}</p>
        <button (click)="increment()">Increment</button>
      </div>
      
      <router-outlet></router-outlet>
    </div>
  `,
  styles: [`
    .container { padding: 20px; }
    h1 { color: #dd0031; }
    .counter { margin: 20px 0; }
    button { 
      padding: 10px 20px;
      background: #dd0031;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  `]
})
export class AppComponent {
  // Using Signals for reactive state (Angular 16+)
  title = signal('My First Angular App');
  count = signal(0);

  // Method to increment counter
  increment() {
    this.count.update(value => value + 1);
  }

  // Method to change title
  changeTitle(newTitle: string) {
    this.title.set(newTitle);
  }
}

// main.ts - Application entry point
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

// Bootstrap the standalone root component
bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

// In older Angular versions (pre-standalone), you would bootstrap a module:
// platformBrowserDynamic().bootstrapModule(AppModule)

// app.config.ts - Application configuration
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),  // HTTP client is auto-provided in Angular 21
    // Add other app-level providers here
  ]
};

// This replaces the old AppModule approach
// Providers are now configured here instead of in @NgModule

Essential Angular CLI Commands

The Angular CLI provides commands for generating components, services, and other Angular artifacts, as well as building and testing your application.

Command	Description	Example
`ng new`	Create a new Angular project	`ng new my-app`
`ng serve`	Start dev server (localhost:4200)	`ng serve --open`
`ng generate component`	Generate a new component	`ng g c header`
`ng generate service`	Generate a new service	`ng g s data`
`ng generate pipe`	Generate a new pipe	`ng g p currency`
`ng generate directive`	Generate a new directive	`ng g d highlight`
`ng build`	Build for production	`ng build --configuration production`
`ng test`	Run unit tests (Vitest in Angular 21)	`ng test`
`ng lint`	Run linting	`ng lint`
`ng update`	Update Angular and dependencies	`ng update @angular/core`
`ng version`	Show Angular CLI version	`ng version`
`ng add`	Add a library to your project	`ng add @angular/material`

Creating Your First Component

Components are the building blocks of Angular applications. Let's create a simple "Hello" component.

Generate and Use a Component

# Generate a new standalone component
ng generate component hello

# Shorthand
ng g c hello

# This creates:
# - src/app/hello/hello.component.ts
# - src/app/hello/hello.component.html
# - src/app/hello/hello.component.css
# - src/app/hello/hello.component.spec.ts

// hello.component.ts - Generated component
import { Component, Input, signal } from '@angular/core';

@Component({
    selector: 'app-hello',
    standalone: true,
    template: `
        <div class="hello-box">
            <h2>Hello, {{ name() }}!</h2>
            <p>You've been greeted {{ greetCount() }} times.</p>
            <button (click)="greet()">Greet Again</button>
        </div>
    `,
    styles: [`
        .hello-box {
            padding: 20px;
            border: 2px solid #dd0031;
            border-radius: 8px;
            margin: 20px 0;
        }
        button {
            background: #dd0031;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    `]
})
export class HelloComponent {
    @Input() name = signal('World');  // Input property with signal
    greetCount = signal(0);

    greet() {
        this.greetCount.update(count => count + 1);
    }
}

// app.component.ts - Import and use the component
import { Component } from '@angular/core';
import { HelloComponent } from './hello/hello.component';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [HelloComponent],  // Import the component
    template: `
        <h1>My Angular App</h1>
        <app-hello [name]="'Alice'"></app-hello>
        <app-hello [name]="'Bob'"></app-hello>
    `
})
export class AppComponent {}

Development Workflow

Create project: ng new my-app
Start dev server: ng serve
Generate components: ng g c component-name
Generate services: ng g s service-name
Make changes: Edit files - browser auto-reloads
Run tests: ng test
Build for production: ng build
Deploy: Upload dist/ folder to hosting

Setting Up VS Code for Angular

Visual Studio Code is the recommended editor for Angular development. Install these essential extensions:

Angular Language Service - IntelliSense for Angular templates
Angular Snippets - Code snippets for faster development
ESLint - Code quality and linting
Prettier - Code formatting
Auto Rename Tag - Automatically rename paired HTML tags
Path Intellisense - Autocomplete file paths
GitLens - Enhanced Git integration

Next Steps

Now that you have Angular set up, here's what to learn next:

Components - Learn about component lifecycle, inputs, outputs
Templates - Master template syntax, directives, pipes
Signals - Understand reactive state management with Signals
Services - Create services for business logic and data
Routing - Implement navigation between pages
Forms - Build reactive and template-driven forms
HTTP - Make API calls and handle responses
RxJS - Learn reactive programming with Observables

Key Takeaways

Angular is a complete, TypeScript-based framework for building modern web applications.
Angular 21 uses standalone components by default, eliminating the need for NgModules.
The Angular CLI automates project setup, code generation, testing, and deployment.
Signals provide fine-grained reactive state management (introduced in Angular 16).
Components are the building blocks - each has a TypeScript class, HTML template, and CSS styles.
Use ng serve for development with hot reload, and ng build for production builds.