🚀 Angular Cheat Sheet 2025: The Beginner’s Guide to Modern Angular

Angular has changed a lot recently. If you learned it years ago (or never learned it at all), the new "Modern Angular" is simpler, faster, and way more fun. 🎉

Gone are the days of complex modules and slow performance. Welcome to the era of Signals and Standalone Components.

Here is your quick cheat sheet to master the basics in 2025! 👇

1. 🏗️ The Component (The Building Block)

Think of a Component as a Lego brick. It controls one part of your screen. In 2025, components are "Standalone" by default—you don't need to register them in a heavy Module anymore.

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

@Component({
  selector: 'app-hello',
  standalone: true, // 👈 The Magic Word
  template: `
    <h1>Hello, {{ name }}! 👋</h1>
  `,
})
export class HelloComponent {
  name = 'Developer';
}

1. 📡 Signals (Managing Data)

This is the biggest change! 🚨 In the past, we used simple variables. Now, we use Signals. Think of a Signal as a special box that holds a value and shouts to the app whenever that value changes.

Creating a Signal

// 1. Import it
import { signal } from '@angular/core';

// 2. Create it
count = signal(0); 

// 3. Change it
increase() {
  // .set() replaces the value
  this.count.set(5); 

  // .update() uses the old value to make a new one
  this.count.update(value => value + 1);
}

Reading a Signal (in HTML)

Crucial Rule: You must call a signal like a function () to read it!

<p>The count is: {{ count() }}</p>

<p>The count is: {{ count }}</p>

1. 🚦 Logic in HTML (@if & @for)

Angular used to have confusing syntax like *ngIf. Now, it looks just like JavaScript! It is cleaner and easier to read.

Conditional (@if)

Show or hide things easily. 🫣

@if (isLoggedIn()) {
  <button>Logout 🚪</button>
} @else {
  <button>Login 🔑</button>
}

Looping (@for)

Display a list of items. 📝 Note: You must use track to tell Angular how to identify items (usually by ID).\

<ul>
  @for (user of users(); track user.id) {
    <li>{{ user.name }} 👤</li>
  } @empty {
    <li>No users found! 🤷‍♂️</li>
  }
</ul>

1. 🔌 Inputs (Passing Data Down)

How do you pass data from a Parent component to a Child component? Use the new input() signal!

// In the Child Component
import { input } from '@angular/core';

export class UserCardComponent {
  // This input is required! The app will crash if you forget it.
  name = input.required<string>(); 

  // This one has a default value
  role = input('Guest'); 
}

1. ⚡ Super Speed with @defer

This is a superpower for performance. You can tell Angular: "Don't load this heavy part of the page until the user actually needs it."

@defer (on viewport) {
  <heavy-chart-component /> 📊
} @placeholder {
  <p>Scroll down to see the chart... ⬇️</p>
} @loading {
  <spinner /> ⏳
}

1. 💉 Getting Tools (Injection)

Stop putting everything in the constructor. The modern way to get services (like HTTP or Router) is using inject().

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export class DataService {
  // Cleaner and less typing! ✨
  private http = inject(HttpClient);

  getData() {
    return this.http.get('/api/data');
  }
}

📝 Summary

Modern Angular in 2025 is all about:

Standalone Components (No more Modules)

Signals (Better state management)

@if / @for (Better HTML syntax)

inject() (Better dependency injection)

Ready to build something cool? Let me know in the comments! 👇

You can support me if this helped! ko-fi.com/lazydev