Angular: Build Your First App (Node.js v18.13.0+)

Getting started with Angular, Google’s powerful front-end framework, can seem like a daunting task for many aspiring developers, but I promise you, it’s more accessible than you think. This technology, known for its robust structure and scalability, is a cornerstone for building complex, single-page applications that truly impress. Ready to build something amazing?

1. Set Up Your Development Environment: Node.js and npm

Before you can even think about writing your first line of Angular code, you need a solid foundation. That means installing Node.js and its package manager, npm. Angular applications are built on Node.js, so it’s non-negotiable. I always recommend going with the Long Term Support (LTS) version because it offers stability and fewer unexpected breaking changes. As of 2026, I’ve found that Node.js v18.13.0 or higher is the sweet spot for compatibility with the latest Angular releases.

To get it, head over to the official Node.js website and download the appropriate installer for your operating system. The installation process is straightforward: just click through the prompts, accepting the default options. Once installed, open your terminal or command prompt and verify the installation:

node -v
npm -v

You should see version numbers displayed. If not, something went wrong, and you’ll need to troubleshoot your installation. Trust me, getting this right upfront saves countless headaches later.

2. Install the Angular CLI

The Angular CLI (Command Line Interface) is your best friend when developing with Angular. It automates common development tasks, from creating new projects and components to serving your application and building it for production. Seriously, don’t even think about developing Angular without it. It’s a massive time-saver and enforces best practices.

With Node.js and npm in place, installing the CLI is a single command in your terminal:

npm install -g @angular/cli

The -g flag means “global,” making the ng command available from any directory on your system. This is what you want. After installation, verify it:

ng version

You’ll see a detailed output showing your Angular CLI version, Node.js version, and other relevant package versions. This output is incredibly useful for debugging later on, so get used to seeing it.

3. Create Your First Angular Project

Now for the exciting part: creating your first Angular application! The Angular CLI makes this incredibly easy. Navigate to the directory where you want to create your project in your terminal.

ng new my-first-app --defaults --style=scss

Let’s break down this command:

• ng new: This is the Angular CLI command to create a new project.
• my-first-app: This is the name of your project. The CLI will create a new directory with this name.
• --defaults: This flag tells the CLI to use the default settings for things like routing (no) and stylesheet format (CSS). I usually prefer to specify --style=scss explicitly because SCSS is a superior choice for maintainable stylesheets. CSS is fine for tiny projects, but for anything serious, SCSS offers nesting, variables, and mixins that are invaluable.
• --style=scss: This specifically sets the default stylesheet preprocessor to SCSS. I’m a firm believer that SCSS (or Sass) is the only way to write scalable CSS. It just makes sense.

The CLI will then install all the necessary npm packages. This might take a few minutes, depending on your internet connection. Once it’s done, you’ll see a success message.

4. Explore the Project Structure

After the CLI finishes, navigate into your new project directory:

cd my-first-app

Now, open this directory in your favorite code editor. I highly recommend Visual Studio Code; it has fantastic Angular support and a vibrant extension ecosystem. You’ll see a few key folders and files:

• node_modules/: This directory contains all the npm packages your project depends on. Don’t touch this directly.
• src/: This is where 99% of your application code will live. It’s the heart of your project.
• src/app/: Contains your application’s components, modules, and services. This is where you’ll spend most of your time.
• src/assets/: For static assets like images, icons, and fonts.
• src/environments/: Holds environment-specific configuration files (e.g., for development, production).
• angular.json: The main configuration file for your Angular workspace. It defines project-specific settings, build options, and more. Understanding this file is key to advanced configurations.
• package.json: Defines your project’s metadata and lists its dependencies. This is standard for any Node.js project.
• tsconfig.json: TypeScript configuration file. Angular is built with TypeScript, so this file dictates how TypeScript is compiled into JavaScript.

The src/app folder is particularly important. Inside, you’ll find app.component.ts (the main component logic), app.component.html (its template), app.component.scss (its styles), and app.module.ts (the root module of your application). This component-based architecture is fundamental to Angular.

5. Run Your Angular Application

It’s time to see your creation in action! In your terminal, still within the my-first-app directory, run:

ng serve --open

The ng serve command compiles your application and launches a development server. The --open (or -o) flag automatically opens your default web browser to http://localhost:4200/ once the application is compiled. You should see a default Angular welcome page. This development server also provides live reloading, meaning any changes you save in your code will automatically refresh the browser. It’s incredibly convenient for rapid development.

6. Generate Your First Component

One of Angular’s superpowers is its CLI’s ability to scaffold code. Let’s create a new component. Components are the building blocks of Angular applications. They consist of a template (HTML), a stylesheet (CSS/SCSS), and a class (TypeScript) that defines its behavior.

While your application is still running with ng serve (you can open a new terminal window), run this command:

ng generate component my-new-component

Or, for the shorthand:

ng g c my-new-component

The CLI will create a new folder src/app/my-new-component/ with four files: my-new-component.component.ts, my-new-component.component.html, my-new-component.component.scss, and my-new-component.component.spec.ts (for testing). It also automatically declares this component in your app.module.ts, which is a huge time-saver.

Now, to display your new component, open src/app/app.component.html and replace its entire content with something simpler, then add your new component’s selector:

<h1>Welcome to my first Angular app!</h1>
<app-my-new-component></app-my-new-component>

Save app.component.html, and your browser, still running on localhost:4200, will automatically refresh. You should now see “my-new-component works!” rendered below your heading. That’s your component in action!

7. Understanding Data Binding and Events

Angular’s strength lies in its ability to manage data and user interactions efficiently. Let’s quickly touch on two core concepts: data binding and event binding.

Open src/app/my-new-component/my-new-component.component.ts and add a property:

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

@Component({
  selector: 'app-my-new-component',
  templateUrl: './my-new-component.component.html',
  styleUrls: ['./my-new-component.component.scss']
})
export class MyNewComponentComponent {
  message: string = 'Hello from my Angular component!';

  changeMessage(): void {
    this.message = 'You clicked the button!';
  }
}

Now, open src/app/my-new-component/my-new-component.component.html and modify it:

<p>{{ message }}</p>
<button (click)="changeMessage()">Click Me!</button>

Save both files. In your browser:

• The {{ message }} syntax (interpolation) displays the value of the message property from your component class. This is one form of one-way data binding.
• The (click)="changeMessage()" syntax (event binding) listens for the click event on the button and executes the changeMessage() method in your component.

Click the button, and you’ll see the message update instantly without a page refresh. This reactive nature is what makes modern web applications feel so fluid. This fundamental interaction is what makes Angular so powerful, and frankly, it’s what differentiates it from simpler libraries. You’re not just manipulating the DOM; you’re building a data-driven application.

Getting started with Angular means embracing a structured, powerful framework that demands a bit of upfront learning but pays dividends in maintainability and scalability. By following these steps – setting up your environment, leveraging the CLI, and understanding fundamental concepts – you’re well on your way to building sophisticated web applications that stand the test of time. Now, go forth and build something incredible!