Should You Use Angular in 2024

Despite all the haters, and, I’m gonna be honest, I was one of those haters for a long time, Angular has A LOT going for it.

First of all, obviously, it is backed by a well funded, dedicated team committed to both long term maintenance and the addition of exciting new features.

Second, it is a widely adopted framework, especially in enterprise software. Hey… Stop rolling your eyes! I know enterprise is not that exciting but we can’t all work at fancy new startups, burning investors money to build whatever the current trend is. It’s AI… We all know the trend is AI.

Some of us would like to actually get some shit done, and, preferably, to also enjoy some of those sweet big corporation perks. And, if that’s the case, Angular is the safest bet.

Finally, Angular adapted to the modern web requirements and went through some major overhauls. You’ll be surprised to find out that Angular is robust, easy to use, and offers a great dev experience, so let’s look at 3 key aspects that make this framework a great tool for building any type of web application.

A Modern Component

If you worked with Angular in the past, but failed to keep up with the more recent updates, you are in for a big surprise. The dev experience is completely different compared to a few years back.

Components can be standalone, so no more headaches with unnecessary modules,

@Component({
 selector: "cat-facts",
 standalone: true,
 templateUrl: "./app.component.html",
})

the Zone JS based reactivity was replaced with a much more efficient, fine grained signals based solution,

export class CatFacts {
   facts = signal<Fact[]>([]);
   count = computed(() => this.facts().length);

    async ngOnInit() {
  const resp = await fetch(FACTS);
  const json = await resp.json();
  this.facts.set(json.data);
}


async fetchFact() {
  const resp = await fetch(ONE_FACT);
  const fact = await resp.json();
  this.facts.set([fact, ...this.facts()]);
}
}

and the new built-in control flow can be used instead of the previous structural directives.

<div>
   <header>
   <h1>{{count()}} Cat Facts</h1>
   @if (count() < 15) {
       <button (click)="fetchFact()">I Want More!</button>
   }
   </header>
   @for (fact of facts(); track fact.id) {
   <h3>{{ fact.fact }}</h3>
   }
   @empty { <p>What is a cat?!</p> }
</div>

These are the building blocks behind any modern web app, and fully understanding them is a must if you want to be an efficient developer. Quick side note, I’m posting more deep dives into web frameworks and core programming concepts for the channel members, and you can join us on the youtube channel.

Complete Tooling

Here is the thing. We all like to follow trends, and we get easily distracted by the cool new shiny features. However, these don’t really matter in production. The real world cares about scalability, efficient processes and low cost, maintainable code. And these are usually the result of strict conventions, opinionated decisions and a wide range of internal tools aimed to impose coding standards.

Angular comes packed with A LOT OF such built in features. User input and validation can be easily managed through powerful reactive forms.

export class LoginComponent {
  userForm = new FormGoup({
    username: new FormControl("", Validators.required),
    email: new FormControl("", Validators.email),
  });

  onSubmit() {
    console.log(this.userForm.value);
  }
}

These provides a model-driven approach to handling form inputs whose values change over time through a combination of form controls, groups and validators.

Also, Single Page App navigation can be handled through the Angular Router,

export const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent },
  { path: '**', component: NotFoundComponent }
];

and you have access to built in solutions even for topics such as server side communication, animations or multi-language support.

// server side communication
private _http = inject(HttpClient);

fetchData(toDoUrl): Observable<ToDo> {
  return this._http.get<ToDo>(toDoUrl);
}

// animations
animations: [
  trigger('fadeIn', [
    transition(':enter', [
      style({ opacity: 0 }),
      animate('500ms',
      style({ opacity: 1 }))
    ])
  ])
]

// multi-language support
private _translate = inject(TranslateService);
translate.setDefaultLang('en');
switchLanguage(language: string) {
  this._translate.use(language);
}

All these are complemented by one of the best CLI tools in the industry and good testing support.

$ ng generate component profile-form
$ ng generate service auth-service

So the main advantage when working with Angular is that for most use cases you don’t have to rely on other 3rd party libraries. Everything is bundled directly in the framework, offering a unified dev experience and good code quality. This is why I always advise people to thoroughly go through the Angular documentation (which is really well written by the way) - you’ll be surprised by the sheer number of features Angular is offering.

Server Side Rendering

You can’t talk about modern web development without mentioning one of the most important shifts in recent history - moving rendering back on the server. There are various benefits when working with SSR and Hydration, and this is the main reason we got flooded with so many meta-frameworks in recent years, and guess what? Angular comes with its own SSR implementation which helps you improve your app performance, get better core web vitals, and of course build more SEO friendly apps.

You can opt into SSR when starting a new project from the CLI ( ng new awesome-project —ssr ), and most of the heavy work is done under the hood for you.

SSR is then paired with Angular’s Hydration process to avoid doing extra work to re-create DOM nodes, and avoid bad user experiences such as UI flickers or layout shifts.

So trust me, Angular is a safe bet for both your one-man pet project and for enterprise apps built by large teams of developers. But, of course, if you don’t agree with me, feel free to share your opinion in the comments.

If you enjoyed this article you should consider joining our newsletter.

Until next time, thank you for reading!