Getting Started with Angular: A Step-by-Step Beginner Tutorial

Getting started with Angular beginner tutorial

Angular can seem complicated when you first encounter components, TypeScript, templates, services and dependency injection. The easiest way to understand these concepts is to create a small application and see how the pieces work together.

In this beginner tutorial, we'll install the tools required for Angular, create a new project, run it locally, create a component and build a simple task list.

What You Need Before Starting

Before learning Angular, you should have at least a basic understanding of:

HTML
CSS
JavaScript
Command-line basics

Basic TypeScript knowledge is helpful, but you can learn TypeScript concepts while learning Angular.

Step 1: Install Node.js

Angular development requires Node.js tooling.

After installing a supported Node.js version, open Command Prompt, PowerShell or your terminal and check the installation:

node --version

Then check npm:

npm --version

If both commands return version numbers, Node.js and npm are available.

Step 2: Install Angular CLI

Angular CLI provides commands for creating, running, building and managing Angular applications.

Install it with:

npm install -g @angular/cli

After installation, verify it:

ng version

The command displays information about your Angular development environment.

Step 3: Create Your First Angular Project

Navigate to the directory where you want to create your application.

Then run:

ng new my-first-angular-app

The Angular CLI may ask configuration questions depending on the Angular version and available project options.

For your first project, you can choose the options appropriate for the simple application you're building.

The CLI creates the project and installs the required packages.

Step 4: Open the Project

Move into the new project directory:

cd my-first-angular-app

If you use Visual Studio Code, you can open the folder with:

code .

You should now see the Angular project files in your editor.

Step 5: Run the Angular Application

Start the development server:

ng serve

The terminal will display the local address used by the development server. A commonly used development address is:

http://localhost:4200

Open the address shown by your terminal in a browser.

If the generated Angular application appears, your environment is working.

Understanding the Angular Project Structure

A new Angular project contains several files and directories. You don't need to understand all of them immediately.

A simplified structure looks similar to:

my-first-angular-app/
│
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   └── ...
│   │
│   ├── index.html
│   ├── main.ts
│   └── styles.css
│
├── angular.json
├── package.json
└── tsconfig.json

What Does the src Folder Contain?

The src directory contains the main application source code.

Most of your day-to-day development work will happen inside this area.

What Is the app Folder?

The app folder contains application components and can later contain services, models and other application-specific code.

As your application grows, you'll normally organize this folder into a structure appropriate for the project.

What Is main.ts?

main.ts is involved in starting or bootstrapping the Angular application.

Beginners normally don't need to modify it frequently while learning basic component development.

What Is package.json?

The package.json file contains information about the project's packages and scripts.

When dependencies are installed through npm, they are represented through the project's package configuration.

Step 6: Understand an Angular Component

Components are fundamental building blocks of an Angular application.

A simple component might look like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  template: `
    <h2>Hello Angular!</h2>
    <p>My first Angular component.</p>
  `
})
export class WelcomeComponent {
}

There are three important pieces here:

@Component provides component metadata.
selector identifies the component.
The class contains the component's TypeScript logic.

Step 7: Generate a Component

Instead of manually creating all the required files, Angular CLI can generate a component.

Run:

ng generate component welcome

You can also use the shorter command:

ng g c welcome

Angular CLI creates the component files according to your project's configuration.

Step 8: Display Data in a Template

Let's create a simple value in the component:

export class WelcomeComponent {
  title = 'Welcome to Angular';
}

Then display it in the HTML template:

<h2>{{ title }}</h2>

The double curly braces use Angular interpolation to display the value.

Step 9: Add a Button and Handle a Click

Now let's add some interaction.

In the component:

export class WelcomeComponent {

  message = 'Click the button';

  changeMessage() {
    this.message = 'The button was clicked!';
  }
}

In the template:

<p>{{ message }}</p>

<button (click)="changeMessage()">
  Click Me
</button>

The (click) syntax binds the button's click event to the component method.

Step 10: Work With an Array

Real applications frequently display collections of data.

For example:

export class WelcomeComponent {

  technologies = [
    'Angular',
    'TypeScript',
    'HTML',
    'CSS'
  ];
}

Your template can then render those values using the control-flow syntax supported by your Angular version.

For example, in modern Angular:

<ul>
  @for (technology of technologies; track technology) {
    <li>{{ technology }}</li>
  }
</ul>

Build a Simple Angular Task List

Now let's combine several concepts into a small application.

Our task list will allow a user to:

Enter a task
Add the task
Display all tasks
Delete a task

Task List Component

A simplified component could look like this:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-task-list',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './task-list.component.html'
})
export class TaskListComponent {

  newTask = '';

  tasks: string[] = [];

  addTask() {

    const task = this.newTask.trim();

    if (!task) {
      return;
    }

    this.tasks.push(task);

    this.newTask = '';
  }

  deleteTask(index: number) {
    this.tasks.splice(index, 1);
  }
}

Task List Template

The corresponding HTML can be:

<h2>My Tasks</h2>

<input
  [(ngModel)]="newTask"
  placeholder="Enter a task">

<button (click)="addTask()">
  Add Task
</button>

<ul>

  @for (task of tasks; track $index) {

    <li>

      {{ task }}

      <button (click)="deleteTask($index)">
        Delete
      </button>

    </li>

  }

</ul>

This small example introduces several important Angular concepts:

Components
Properties
Methods
Event binding
Two-way binding
Displaying collections

Understanding Two-Way Data Binding

Notice this line:

[(ngModel)]="newTask"

This connects the input field with the newTask property.

When the user types in the input, the component property can be updated. When the component changes that value, the input can reflect the new value.

In this example, after adding the task we set:

this.newTask = '';

which clears the input.

Angular Components and Services

Our small task application stores everything directly inside the component. That's acceptable for learning, but larger applications usually separate responsibilities.

A more realistic architecture could be:

Task Component
      ↓
Task Service
      ↓
HTTP Request
      ↓
Backend API
      ↓
Database

The component handles the user interface while a service can handle communication with the backend.

Connecting Angular to an ASP.NET Core API

If you're a .NET developer, a common architecture is:

Angular
   ↓
HTTP / JSON
   ↓
ASP.NET Core Web API
   ↓
Entity Framework Core
   ↓
SQL Server

For example, Angular could request:

GET /api/tasks

The API could return:

[
  {
    "id": 1,
    "title": "Learn Angular",
    "completed": false
  },
  {
    "id": 2,
    "title": "Build an API",
    "completed": true
  }
]

Angular can then display the returned tasks.

Useful Angular CLI Commands

Here are some commands you'll frequently use while learning Angular:

Command	Purpose
`ng new app-name`	Create a project
`ng serve`	Run the development server
`ng g c name`	Generate a component
`ng g s name`	Generate a service
`ng build`	Build the application
`ng version`	Display Angular environment information

Common Angular Beginner Errors

'ng' Is Not Recognized

If your terminal doesn't recognize ng, first verify Node.js and npm:

node --version
npm --version

Then verify Angular CLI:

ng version

You may need to restart the terminal after installation. Also check that the relevant npm global executable location is available through your system PATH.

Port Is Already in Use

If the development port is occupied, you can run the application on another port:

ng serve --port 4300

Then open the address reported by Angular CLI.

Package Installation Problems

If a project was downloaded from source control and its dependencies have not been installed, you will commonly need:

npm install

Avoid randomly deleting configuration files or changing dependency versions before understanding the actual error message.

Following Outdated Angular Tutorials

This is a particularly common problem.

Angular evolves, so an old tutorial may use modules, APIs or syntax that look different from a newly generated project.

Check the Angular version and documentation relevant to the project you're actually using.

Should You Learn Standalone Components?

Yes. Modern Angular development commonly uses standalone APIs, so beginners should understand standalone components.

However, you may still encounter older applications that use NgModule-based organization.

Understanding both concepts is useful if you expect to maintain existing Angular applications.

What Should You Learn Next?

After completing a simple application, continue in roughly this order:

Components
Templates
Data binding
TypeScript
Services
Dependency injection
Routing
Forms and validation
HTTP requests
Authentication
Error handling
Testing

Beginner Angular Project Ideas

Once you understand the fundamentals, practice by building something yourself.

Good beginner projects include:

Task manager
Expense tracker
Notes application
Product catalog
Weather dashboard using an API
Simple employee management frontend

Don't start with a huge application. A smaller project makes it easier to understand why each Angular feature is being used.

Frequently Asked Questions

What do I need to install for Angular?

A typical local Angular development setup requires Node.js/npm and Angular CLI, along with a code editor such as Visual Studio Code.

Do I need to know JavaScript before Angular?

You should understand basic JavaScript first. Concepts such as variables, functions, arrays, objects, classes, modules and asynchronous programming will make Angular easier to learn.

Do I need TypeScript?

Angular development commonly uses TypeScript, so you should learn its basic types, interfaces, classes and related syntax.

Can I use Angular with C#?

Yes. Angular can provide the frontend while a C# ASP.NET Core Web API provides backend services.

What is the difference between ng serve and ng build?

ng serve is used during development to serve the application locally. ng build creates application build output according to the project's configuration.

What should I build after learning Angular basics?

Build a small CRUD-style application that uses components, forms, routing and an API. This helps connect individual Angular concepts into a complete application.

Conclusion

The fastest way to understand Angular is to combine learning with practical development.

Install the development tools, create a small project, understand how components work and gradually add data binding, services, routing, forms and API communication.

Don't worry about mastering the entire framework before building something. Start with a small working application and introduce new Angular concepts as your project requires them.

Search Suggest