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:

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?

? 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

? 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

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:

cd my-app

Run the development server

Start the Angular development server:

ng serve

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

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

The ng serve command watches your files and automatically rebuilds and reloads the page when you make changes.

Server options

Customize the development server with these common options:

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

src/app/app.component.ts

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:

src/app/app.component.ts

export class AppComponent {
  title = 'My First Angular App';
}

Update the template

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

src/app/app.component.html

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

src/app/app.module.ts

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:

ng build

The CLI compiles your application into an output directory:

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

Project structure

Understand the files and folders in your Angular workspace

Components

Learn how to build reusable UI components