Quickstart

Get started with Angular in minutes by installing the CLI and creating your first application

Get up and running with Angular in just a few minutes. This guide walks you through installing Angular, creating your first project, and building a simple component.

Prerequisites

Before you begin, ensure you have Node.js installed on your system. Angular requires an active LTS or maintenance LTS version of Node.js.

Check your Node.js version by running node --version in your terminal. Visit nodejs.org to download the latest LTS version if needed.

Installation

1. Install the Angular CLI

   The Angular CLI is a command-line tool that helps you initialize, develop, and maintain Angular applications. Install it globally using your preferred package manager:

   npm

   npm install -g @angular/cli
   

   Verify the installation by checking the CLI version:

   ng version
   
2. Create a new workspace

   Use the ng new command to create a new Angular workspace and application. The CLI will prompt you to configure routing and stylesheet format:

   ng new my-angular-app
   

   The CLI will ask you:

   • Would you like to add Angular routing? - Type y for yes (recommended)
   • Which stylesheet format would you like to use? - Choose CSS, SCSS, Sass, or Less

   The workspace creation process may take a few minutes as the CLI downloads dependencies and initializes the project.

3. Navigate to your project

   Change to the newly created project directory:

   cd my-angular-app
   

   Your project structure will look like this:

   my-angular-app/
   ├── src/
   │   ├── app/
   │   │   ├── app.component.ts    # Root component
   │   │   ├── app.component.html  # Root template
   │   │   ├── app.component.css   # Root styles
   │   │   └── app.config.ts       # Application config
   │   ├── index.html              # Main HTML file
   │   └── main.ts                 # Entry point
   ├── angular.json                # Angular CLI config
   ├── package.json                # Dependencies
   └── tsconfig.json               # TypeScript config
   
4. Run the development server

   Start the development server to see your application in action:

   ng serve
   

   The application will compile and start the dev server. Once ready, open your browser to:

   http://localhost:4200
   

   The dev server includes hot module replacement—changes to your code will automatically reload the browser.

   Use ng serve --open (or ng serve -o) to automatically open your browser to the running application.

Create your first component

Now that your application is running, let’s create a custom component to understand Angular’s component architecture.

1. Generate a new component

   Use the Angular CLI to generate a new component:

   ng generate component hello
   

   Or use the shorthand:

   ng g c hello
   

   The CLI creates four files:

   • hello.component.ts - Component class with logic
   • hello.component.html - Template (HTML)
   • hello.component.css - Styles
   • hello.component.spec.ts - Unit tests
2. Edit the component

   Open src/app/hello/hello.component.ts and update it:

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-hello',
     templateUrl: './hello.component.html',
     styleUrls: ['./hello.component.css']
   })
   export class HelloComponent {
     name = 'Angular Developer';
     count = 0;
   
     increment() {
       this.count++;
     }
   
     reset() {
       this.count = 0;
     }
   }
   
3. Update the template

   Edit src/app/hello/hello.component.html:

   <div class="hello-container">
     <h1>Hello, {{ name }}!</h1>
     <p>You've clicked the button {{ count }} times.</p>
     
     <div class="button-group">
       <button (click)="increment()">Click Me</button>
       <button (click)="reset()">Reset</button>
     </div>
   </div>
   
4. Add styles

   Open src/app/hello/hello.component.css and add some styling:

   .hello-container {
     padding: 20px;
     text-align: center;
     font-family: Arial, sans-serif;
   }
   
   h1 {
     color: #1976d2;
     margin-bottom: 20px;
   }
   
   .button-group {
     margin-top: 20px;
   }
   
   button {
     margin: 0 10px;
     padding: 10px 20px;
     background-color: #1976d2;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
   }
   
   button:hover {
     background-color: #1565c0;
   }
   
5. Use the component

   Add your new component to the main application template. Open src/app/app.component.html and replace the content with:

   <app-hello></app-hello>
   

   Save the file and check your browser—you should see your new component with interactive buttons!

Understanding the component

Let’s break down what makes an Angular component:

Component decorator

The @Component decorator provides metadata that tells Angular how to process the class:

@Component({
  selector: 'app-hello',        // HTML tag name
  templateUrl: './hello.component.html',  // Template file
  styleUrls: ['./hello.component.css']    // Style files
})

• selector: Defines the custom HTML element name
• templateUrl: Points to the HTML template file
• styleUrls: Array of stylesheet paths (styles are scoped to the component)

Data binding

Angular provides several ways to bind data between the component class and template:

Interpolation

// Component
name = 'Angular';

// Template
<h1>Hello {{ name }}</h1>

Using standalone components

Angular’s modern standalone components simplify the development experience by removing the need for NgModules:

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

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h2>Standalone Component</h2>
    @if (show) {
      <p>This uses the new control flow syntax!</p>
    }
    <button (click)="show = !show">Toggle</button>
  `
})
export class StandaloneComponent {
  show = true;
}

Standalone components are simpler to use and enable better tree-shaking for smaller bundle sizes.

Building for production

When you’re ready to deploy your application, build it for production:

ng build

This command:

• Compiles your TypeScript code
• Bundles your application
• Optimizes for production (minification, tree-shaking)
• Outputs to the dist/ directory

The production build is optimized for performance with:

• Ahead-of-Time (AOT) compilation
• Dead code elimination
• Minification and compression
• Source maps for debugging (optional)

Use ng build --configuration production to ensure all production optimizations are applied.

Running tests

Angular projects come with testing setup out of the box:

Unit tests

ng test

The CLI uses Jasmine and Karma for unit testing, providing a complete testing environment.

Next steps

Now that you have a working Angular application, explore these topics to deepen your knowledge:

Components & templates

Learn about component architecture, lifecycle hooks, and template syntax

Dependency injection

Understand Angular’s DI system for managing services and dependencies

Routing

Build multi-page applications with the Angular Router

Forms

Create reactive and template-driven forms for user input

Common CLI commands

Here are some frequently used Angular CLI commands:

Command	Description
ng serve	Start development server
ng build	Build the project
ng test	Run unit tests
ng generate component <name>	Create a new component
ng generate service <name>	Create a new service
ng generate module <name>	Create a new module
ng lint	Lint your code
ng update	Update Angular dependencies

Use ng help to see all available commands, or ng <command> --help for detailed information about a specific command.