> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/angular/angular/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Note>
  Check your Node.js version by running `node --version` in your terminal. Visit [nodejs.org](https://nodejs.org/) to download the latest LTS version if needed.
</Note>

## Installation

<Steps>
  <Step title="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:

    <CodeGroup>
      ```bash npm theme={null}
      npm install -g @angular/cli
      ```

      ```bash yarn theme={null}
      yarn global add @angular/cli
      ```

      ```bash pnpm theme={null}
      pnpm add -g @angular/cli
      ```
    </CodeGroup>

    Verify the installation by checking the CLI version:

    ```bash theme={null}
    ng version
    ```
  </Step>

  <Step title="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:

    ```bash theme={null}
    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

    <Warning>
      The workspace creation process may take a few minutes as the CLI downloads dependencies and initializes the project.
    </Warning>
  </Step>

  <Step title="Navigate to your project">
    Change to the newly created project directory:

    ```bash theme={null}
    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
    ```
  </Step>

  <Step title="Run the development server">
    Start the development server to see your application in action:

    ```bash theme={null}
    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.

    <Note>
      Use `ng serve --open` (or `ng serve -o`) to automatically open your browser to the running application.
    </Note>
  </Step>
</Steps>

## Create your first component

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

<Steps>
  <Step title="Generate a new component">
    Use the Angular CLI to generate a new component:

    ```bash theme={null}
    ng generate component hello
    ```

    Or use the shorthand:

    ```bash theme={null}
    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
  </Step>

  <Step title="Edit the component">
    Open `src/app/hello/hello.component.ts` and update it:

    ```typescript theme={null}
    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;
      }
    }
    ```
  </Step>

  <Step title="Update the template">
    Edit `src/app/hello/hello.component.html`:

    ```html theme={null}
    <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>
    ```
  </Step>

  <Step title="Add styles">
    Open `src/app/hello/hello.component.css` and add some styling:

    ```css theme={null}
    .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;
    }
    ```
  </Step>

  <Step title="Use the component">
    Add your new component to the main application template. Open `src/app/app.component.html` and replace the content with:

    ```html theme={null}
    <app-hello></app-hello>
    ```

    Save the file and check your browser—you should see your new component with interactive buttons!
  </Step>
</Steps>

## 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:

```typescript theme={null}
@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:

<CodeGroup>
  ```typescript Interpolation theme={null}
  // Component
  name = 'Angular';

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

  ```typescript Property binding theme={null}
  // Component
  imageUrl = 'assets/logo.png';

  // Template
  <img [src]="imageUrl" />
  ```

  ```typescript Event binding theme={null}
  // Component
  handleClick() {
    console.log('Button clicked!');
  }

  // Template
  <button (click)="handleClick()">Click</button>
  ```

  ```typescript Two-way binding theme={null}
  // Component
  username = '';

  // Template
  <input [(ngModel)]="username" />
  ```
</CodeGroup>

## Using standalone components

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

```typescript theme={null}
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:

```bash theme={null}
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)

<Note>
  Use `ng build --configuration production` to ensure all production optimizations are applied.
</Note>

## Running tests

Angular projects come with testing setup out of the box:

<CodeGroup>
  ```bash Unit tests theme={null}
  ng test
  ```

  ```bash End-to-end tests theme={null}
  ng e2e
  ```
</CodeGroup>

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:

<CardGroup cols={2}>
  <Card title="Components & templates" icon="cube" href="/concepts/components">
    Learn about component architecture, lifecycle hooks, and template syntax
  </Card>

  <Card title="Dependency injection" icon="plug" href="/concepts/dependency-injection">
    Understand Angular's DI system for managing services and dependencies
  </Card>

  <Card title="Routing" icon="route" href="/routing/router-overview">
    Build multi-page applications with the Angular Router
  </Card>

  <Card title="Forms" icon="input" href="/forms/overview">
    Create reactive and template-driven forms for user input
  </Card>
</CardGroup>

## 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 |

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