Angular has evolved into a powerful and modern framework for building scalable web applications. With the advent of standalone components, reactive primitives, and deferrable views, Angular is more streamlined than ever.

In this post, we’ll walk through core Angular concepts every modern developer should know, complete with theory and code examples. Whether you’re a beginner or brushing up, this guide is your Angular fundamentals crash course.

Table of Contents📚

  • Routing
  • Standalone Components
  • Forms
  • Property Binding
  • Event Handling
  • Conditional Rendering
  • For Loops in Angular
  • Passing Data Between Components
  • Deferrable Views

Routing🧭

Routing lets you navigate between views and components in Angular apps.

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];
// main.ts
bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
});

Standalone Components🧩

Standalone components don’t need an NgModule. They promote simpler architecture.

@Component({
  standalone: true,
  selector: 'app-hello',
  template: `Hello, Angular!`,
})
export class HelloComponent {}

Forms📝

Angular supports template-driven and reactive forms.
Template-driven Form:

Submit

Property Binding🔗

Bind values from component to template using [property].

Event Handling🖱️

Use (event) to listen for DOM events

Click Me
handleClick() {
  console.log('Button clicked!');
}

Conditional Rendering🔄

Show/hide elements with *ngIf.

Welcome back!
isLoggedIn = true;

For Loops in Angular🔁

Use *ngFor to loop through lists.

{{ user.name }}
users = [{ name: 'Alice' }, { name: 'Bob' }];

Passing Data Between Components🔄

Use @Input and @Output to communicate.

  • Parent to Child: 
@Input() name!: string;
  • Child to Parent: 
@Output() notify = new EventEmitter();

Deferrable Views💤

Optimize performance by deferring part of the UI until needed.

Loading...

Final Thoughts🧠

Angular’s modernization journey with features like standalone components and signals makes it more intuitive, reactive, and leaner than ever. Mastering these fundamentals sets you up for building robust, scalable applications.

Feel free to share your thoughts or ask questions in the comments. Happy coding! 🔥