DEV Community

Cover image for My First Three Months With Angular: Things I Wish I Knew Earlier
Sanket Parmar
Sanket Parmar

Posted on

My First Three Months With Angular: Things I Wish I Knew Earlier

My Angular journey started with React. I thought the transition would take a week or two; it was three weeks just to feel comfortable. And by the second month, I was still hitting walls.

This is not a tutorial. It's everything I wish someone had told me before I opened the Angular docs for the first time.

The Learning Curve Is Real, And It's Steep at the Start

Angular is an opinionated framework. It has a specific way of doing almost everything, routing, forms, HTTP calls, and state management, and it expects you to learn that way before you try to work around it.

Coming from React, where you have a lot of freedom in how you structure things, this felt suffocating at first. Why do I need a module for this? Why is this service injected this way? Why does the CLI generate five files when I want a component?

There are answers. But Angular doesn't explain them to you upfront. You have to learn them by building something real and running into the consequences of not understanding them.

My advice - don't fight the framework in the first month. Just follow its patterns, even when they feel excessive. The reasoning becomes clear later.

Modules Confused Me More Than Anything Else

The module system was my biggest early frustration.

In Angular, everything lives inside a module: components, services, pipes, directives, you name it. Before Angular 14 introduced standalone components, you couldn't use a component anywhere without declaring it in a module first.

Forget to import a module, and your component won't work, with an error message that won't tell you why.

I spent two hours once debugging a template error that turned out to be a missing FormsModule import in my AppModule. The fix was one line. The diagnosis took two hours because I didn't know what modules were responsible.

Once I understood that modules are basically containers that control what's available where, everything clicked. But that understanding took time.

Services and Dependency Injection Took a Mindset Shift

Angular's dependency injection system is one of its strongest features. It also confused me completely for the first few weeks.

The concept is straightforward: instead of creating instances of a class yourself, you tell Angular what you need, and it provides it. Angular manages the lifecycle, the scope, and the sharing of that instance across your app.

Here's a basic example. You create a service:

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  getUser() {
    return { name: 'Alex', role: 'admin' };
  }
}

And you inject it into a component:

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-profile',
  template: `<p>{{ user.name }}</p>`
})
export class ProfileComponent {
  user = this.userService.getUser();

  constructor(private userService: UserService) {}
}

Angular handles creating and sharing the UserService instance.

What tripped me was providedIn: 'root'. That line registers the service at the application root level, meaning the same instance gets shared across the entire app. If you provide a service inside a specific module instead, each instance of that module gets its own copy. I learned that distinction the hard way when I couldn't figure out why two components weren't sharing the same data.

The Difference Between Template-Driven and Reactive Forms

Angular gives you two ways to build forms. I tried both in my first month.

Template-driven forms are simpler to set up. You write most of the logic in the HTML template using directives like ngModel. They're quick for basic forms, but harder to test and harder to control programmatically.

Reactive forms are more verbose upfront, but you control everything in the component class. Validation, value changes, and dynamic fields are all of it is handled in TypeScript, not in the template.

I started with template-driven because the docs introduced them first. Halfway through building a multi-step form, I realized I needed to change field validation based on other field values. That's painful in template-driven forms.

I rebuilt the form using reactive forms. It took half a day, but the result was cleaner and easier to reason about.

If I were starting over, I'd learn reactive forms first and only use template-driven for the simplest cases.

A Note on Hitting the Wall

Around week five, I seriously considered going back to React.

I was building a data table with filtering, pagination, and sortable columns. In React, I'd built something similar in a day and a half. In Angular, I was still debugging why my pipes weren't updating on filter changes.

A friend and colleague of mine, who had been using Angular for years, is the reason I didn't quit. He told me the wall is temporary. Once the patterns clicked, the framework's structure became an advantage, not a burden. Teams could onboard faster, code was more predictable, and large apps stayed manageable.

He was right. By the third month, my efforts started to pay off.

Change Detection Caught Me Off Guard

Angular's change detection makes it fast at scale. It's also one of the things that confused me most as a beginner.

Angular tracks changes to your component's data and updates the view accordingly. By default, it checks every component in the tree when anything changes. That works fine for small apps. For larger apps, the OnPush change detection strategy tells Angular to only check a component when its input references change, rather than on every cycle.

I didn't understand OnPush until I built a list component that was noticeably slow with 500 items. Adding changeDetection: ChangeDetectionStrategy.OnPush to the component decorator improved the rendering performance immediately.

It's not something you need to worry about on day one. But knowing it exists, and that it's the right tool when performance becomes an issue, would have saved me time searching for what was causing the slowdown.

What Month Three Actually Felt Like

By the end of month three, I wasn't an Angular expert 'Somewhat'.

I understood the module system well enough to structure a mid-sized app cleanly. I defaulted to reactive forms. I knew when to inject services at the root level and when to scope them to a module. I'd stopped fighting the CLI output and started appreciating the consistency it enforced.

The things that felt like overhead in month one, the boilerplate, the strict structure, the verbose DI system, started to feel like guardrails. They existed because Angular is built for teams and large codebases, not just solo projects. Once I accepted that, my relationship with the framework changed.

Angular has a real learning curve. It asks more of you upfront than most frontend frameworks. But what it gives you in return, predictability, structure, and tooling that scales, is worth the investment if you're building something that needs to last.

Top comments (0)