Skip to content
Learni
View all tutorials
Développement Web

How to Create Your First Angular App in 2026

18 minBEGINNER
TypeScriptFrontendAngular
Lire en français

Introduction

Angular is a robust TypeScript framework for building modern web applications. In 2026, it remains essential for enterprise projects thanks to its structured architecture, dependency injection system, and optimized performance. This tutorial walks you through creating a fully functional application from scratch. You'll learn how to initialize a project, structure components, and launch the development server. Each step includes complete, testable code. Angular is ideal for motivated beginners who want to understand the solid fundamentals of frontend development.

Prerequisites

  • Node.js 20 or higher
  • npm or yarn installed
  • Basic knowledge of HTML, CSS, and JavaScript
  • An editor such as VS Code

Installing Angular CLI

terminal
npm install -g @angular/cli@latest

This command installs Angular CLI globally, the official tool for creating and managing Angular projects. Verify the installation with ng version.

Creating the Angular Project

terminal
ng new mon-app-angular --routing --style=css
cd mon-app-angular

This command generates a complete Angular project with routing enabled and CSS as the stylesheet preprocessor. The mon-app-angular folder contains all necessary files.

Main TypeScript Component

src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Mon Application Angular 2026';
  message = 'Bienvenue dans Angular !';
}

This root component defines the title and a message. The @Component decorator binds the TypeScript to the template and styles.

Component HTML Template

src/app/app.component.html
<div class="container">
  <h1>{{ title }}</h1>
  <p>{{ message }}</p>
  <button (click)="changeMessage()">Changer le message</button>
</div>

The template uses interpolation {{ }} to display component data and an event handler for the click event.

Adding the Method to the Component

src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Mon Application Angular 2026';
  message = 'Bienvenue dans Angular !';

  changeMessage() {
    this.message = 'Message mis à jour avec succès !';
  }
}

The changeMessage method dynamically updates the message property, demonstrating Angular's two-way data binding.

Running the Application

terminal
ng serve --open

This command compiles and starts the development server at http://localhost:4200. The --open flag automatically opens the browser.

Best Practices

  • Always use TypeScript interfaces to type your data
  • Separate business logic into services
  • Enable strict mode in tsconfig.json
  • Use descriptive component names
  • Test components with Jasmine and Karma

Common Mistakes to Avoid

  • Forgetting to import required modules in app.module.ts
  • Not using change detection correctly
  • Ignoring TypeScript typing errors
  • Running ng serve without installing dependencies

Going Further

Deepen your Angular knowledge with services, advanced routing, and reactive forms. Check out our Learni courses.