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

# Your first Angular app

> Create and run your first Angular application using the Angular CLI and make your first code changes.

## Create a new workspace

Use the Angular CLI to create a new Angular workspace and application:

```bash theme={null}
ng new my-app
```

The `ng new` command creates a new Angular workspace with a default application. It prompts you with configuration options.

### Configuration prompts

When you run `ng new`, the CLI asks several questions:

#### Add Angular routing?

```bash theme={null}
? Would you like to add Angular routing? (y/N)
```

* **Yes**: Generates a routing module for navigation between views
* **No**: Creates a simple single-view application

For your first app, select **Yes** to explore routing capabilities.

#### Stylesheet format

```bash theme={null}
? Which stylesheet format would you like to use?
❯ CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org ]
```

Choose your preferred stylesheet format:

* **CSS**: Standard cascading stylesheets
* **SCSS**: Sass with CSS-like syntax (recommended)
* **Sass**: Sass with indented syntax
* **Less**: Less preprocessor

For your first app, select **CSS** to keep things simple.

### Installation process

After answering the prompts, the CLI:

1. Creates a new directory with your app name
2. Generates the application structure
3. Installs npm dependencies
4. Initializes a Git repository

```bash theme={null}
CREATE my-app/README.md (1036 bytes)
CREATE my-app/.editorconfig (246 bytes)
CREATE my-app/.gitignore (548 bytes)
CREATE my-app/angular.json (3092 bytes)
CREATE my-app/package.json (1050 bytes)
CREATE my-app/tsconfig.json (1010 bytes)
CREATE my-app/src/index.html (328 bytes)
CREATE my-app/src/main.ts (192 bytes)
CREATE my-app/src/styles.css (80 bytes)
CREATE my-app/src/app/app.component.ts (314 bytes)
✔ Packages installed successfully.
```

## Navigate to workspace

Change to the newly created workspace directory:

```bash theme={null}
cd my-app
```

## Run the development server

Start the Angular development server:

```bash theme={null}
ng serve
```

The development server compiles your application and starts a local web server:

```bash theme={null}
** Angular Live Development Server is listening on localhost:4200 **

✔ Compiled successfully.
```

Open your browser and navigate to `http://localhost:4200`. You'll see the Angular welcome page.

<Note>
  The `ng serve` command watches your files and automatically rebuilds and reloads the page when you make changes.
</Note>

### Server options

Customize the development server with these common options:

```bash theme={null}
# Use a different port
ng serve --port 4300

# Open browser automatically
ng serve --open

# Production configuration
ng serve --configuration production
```

## Make your first changes

Now let's modify the application to understand how Angular components work.

### Update the component

Open `src/app/app.component.ts` in your editor:

```typescript src/app/app.component.ts theme={null}
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: false,
})
export class AppComponent {
  title = 'my-app';
}
```

**Key parts of the component:**

* `@Component` decorator defines the component metadata
* `selector` specifies the HTML tag name (`<app-root>`)
* `templateUrl` points to the HTML template file
* `styleUrls` references component-specific stylesheets
* `title` is a component property available in the template

### Modify the property

Change the `title` property value:

```typescript src/app/app.component.ts theme={null}
export class AppComponent {
  title = 'My First Angular App';
}
```

### Update the template

Open `src/app/app.component.html` and replace its contents with:

```html src/app/app.component.html theme={null}
<div style="text-align:center">
  <h1>Welcome to {{ title }}!</h1>
  <p>Congratulations! Your app is running.</p>
</div>
```

The `{{ title }}` syntax is called **interpolation** and displays the component property value in the template.

### See the changes

Save the files and return to your browser. The page automatically updates to show your changes:

```
Welcome to My First Angular App!
Congratulations! Your app is running.
```

## Understanding the app module

Angular applications are organized using NgModules. Open `src/app/app.module.ts`:

```typescript src/app/app.module.ts theme={null}
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 {}
```

**NgModule properties:**

* `declarations`: Components, directives, and pipes belonging to this module
* `imports`: Other modules this module depends on
* `providers`: Services available to the entire application
* `bootstrap`: Root component Angular creates and inserts into the HTML host page

## Build for production

When you're ready to deploy your application, create a production build:

```bash theme={null}
ng build
```

The CLI compiles your application into an output directory:

```bash theme={null}
✔ Compiled successfully.
✔ Browser application bundle generation complete.
```

Production builds are optimized:

* Minified code
* Tree-shaking to remove unused code
* Ahead-of-time (AOT) compilation
* Output hashing for cache busting

The compiled application is saved in the `dist/` directory.

## Next steps

You've created your first Angular application! Continue learning about Angular's architecture.

<CardGroup cols={2}>
  <Card title="Project structure" icon="folder-tree" href="/getting-started/project-structure">
    Understand the files and folders in your Angular workspace
  </Card>

  <Card title="Components" icon="puzzle-piece" href="/concepts/components">
    Learn how to build reusable UI components
  </Card>
</CardGroup>