Getting Started with Angular

Making a first change

The root component lives in src/app. Recent CLI versions name the files app.ts, app.html and app.css with a class called App; projects created with older versions use app.component.ts and AppComponent. The idea is the same either way:

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {
  protected readonly title = signal('my-app');
}

Replace the contents of the template with something small and save the file:

<h1>Hello, {{ title() }}!</h1>
<p>Edit src/app/app.html and save to see the change.</p>
<router-outlet />

{{ title() }} reads the title signal and renders its value. <router-outlet /> is where routed pages will appear once you add routes.

Generating code

The CLI generates components, services and other building blocks with consistent names and a matching test file:

ng generate component hero-list
ng g service hero
ng g guard auth
ng generate --help

ng g is short for ng generate. Add --dry-run to preview which files would be created. ng add installs a library and runs its setup schematic, for example ng add @angular/material.

Editor setup

• VS Code: install the official Angular Language Service extension. It adds autocompletion, type checking and go-to-definition inside templates.
• WebStorm and other JetBrains IDEs include Angular support out of the box.
• Angular DevTools: a Chrome and Firefox extension for inspecting the component tree and profiling change detection in a running app.
• Turn on format-on-save with Prettier or your preferred formatter so templates and TypeScript stay consistent.

Summary

• Install Node.js, then the Angular CLI with npm install -g @angular/cli.
• ng new creates a project and ng serve runs it at http://localhost:4200 with live reload.
• The root component is in src/app; templates read signals by calling them.
• Use ng generate for new code and the Angular Language Service in your editor.