DEV Community: Issam ESSARGHINI

10 Hidden Gems in Angular That You should use

Issam ESSARGHINI — Fri, 07 Mar 2025 16:59:02 +0000

Everyone talks about the big new features in every Angular version, like Standalone Components, Signals, or Control Flow Syntax. But did you know that Angular also has many hidden gems? These features are not very popular, but they can make your code cleaner, faster, and easier to maintain.

In this article, I'll list 10 useful but not well-known Angular features that you should start using in your projects! I will also mention which Angular version introduced them, so you know if you can use them in your project.

Let's go!

1 - inject() Function (Angular 14+)

This is one of the most powerful hidden features in Angular. Before Angular 14, we always used dependency injection inside constructors. But now, inject() lets you get dependencies without a constructor, making code simpler and more flexible.
Example:

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

const http = inject(HttpClient);

=> Why use it?

Works outside components, like in functions or standalone services.
Makes unit testing easier.

2 - provideHttpClient() (Angular 15+)

Instead of importing HttpClientModule in AppModule, you can now provide the HTTP client directly in main.ts.
Example:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

=> Why use it?

Reduces boilerplate code.
Works great with standalone components.

3 - NgOptimizedImage Directive (Angular 15+)

Handling images correctly is important for performance and SEO. NgOptimizedImage makes it easy to lazy-load and optimize images automatically.
Example:

<img ngSrc="image.jpg" width="800" height="600" loading="lazy">

=> Why use it?

Lazy-loads images automatically.
Ensures better Core Web Vitals without extra effort.

4 - Functional Guards and Resolvers (Angular 15+)

Now, you can write guards and resolvers as simple functions instead of services.
Example:

export const authGuard = () => inject(AuthService).isLoggedIn();

=> Why use it?

No need for injectable services.
Less boilerplate, making code simpler.

5 - model() Function (Angular 17+)

A new way to replace @Input() and @Output() with a single, reactive API for component communication.

Example:

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

@Component({
  selector: 'app-toggle',
  template: `
    <button (click)="toggle()">Toggle</button>
    <p>State: {{ state() ? 'On' : 'Off' }}</p>
  `,
})
export class ToggleComponent {
  state = model(false);

  toggle() {
    this.state.set(!this.state());
  }
}

@Component({
  selector: 'app-parent',
  template: `
    <app-toggle [(state)]="isToggled" />
    <p>Parent Value: {{ isToggled }}</p>
  `,
})
export class ParentComponent {
  isToggled = false;
}

=> Why use it?

Simplifies Component API (Combines @Input() and @Output() into a single model() for two-way binding)
Reactive and efficient

6 - DestroyRef (Angular 16+)

A better way to clean up subscriptions and event listeners without manually using ngOnDestroy().

Example:

import { Component, DestroyRef, inject } from '@angular/core';
import { interval, takeUntil } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({
  selector: 'app-example',
  template: `<p>Check the console for updates</p>`,
})
export class ExampleComponent {
  private destroyRef = inject(DestroyRef);  
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed(this.destroyRef)) 
      .subscribe(() => console.log('Still running...'));
  }
}

=> Why use it?

No need for ngOnDestroy() to unsubscribe.
Prevents memory leaks automatically.
Works great with RxJS and event listeners.

7 - provideRouter() Function (Angular 14+)

A cleaner way to define routes without RouterModule.
Example:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

bootstrapApplication(AppComponent, {
  providers: [provideRouter([{ path: '', component: HomeComponent }])]
});

=> Why use it?

Works great for standalone components.
No need to import RouterModule everywhere.

8 - Required Inputs in Components (Angular 16+)

Now you can mark inputs as required to prevent missing data.
Example:

@Component({
  selector: 'app-card',
  template: `<h2>{{ title }}</h2>`
})
export class CardComponent {
  @Input({ required: true }) title!: string;
}

// Angular 17+ using signal-based inputs
@Component({
  selector: 'app-card',
  template: `<h2>{{ title() }}</h2>`
})
export class CardComponent {
  title = input.required<string>();
}

=> Why use it?

Prevents runtime errors when an input is missing.
Makes components more predictable.

9 - toSignal() for Converting Observables (Angular 16+)

Easily convert an Observable to a Signal for better reactivity.
Example:

import { toSignal } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';

const count = toSignal(interval(1000));
console.log(count()); // Updates every second

=> Why use it?

Makes RxJS and Signals work together smoothly.
Removes the need for async pipe in templates.

10 -View Transitions API (Angular 17+)

A simple way to add smooth page animations when navigating between routes.

Example:

import { provideRouter, withViewTransitions } from '@angular/router';
bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes, withViewTransitions())]
});

=> Why use it?

Creates beautiful animations without extra CSS or libraries.
Improves user experience for navigation.

Final Thoughts

These hidden gems are not as famous as Standalone Components or Signals, but they can make your Angular projects faster, cleaner, and easier to maintain!

Which of these features surprised you the most? Let me know in the comments!

Why Angular Still Matters: A Developer’s Journey Through Its Evolution

Issam ESSARGHINI — Thu, 27 Feb 2025 11:13:34 +0000

Howdy, I’m Issam. I’m a Front End Engineer based in Paris. I love how technology, web development, and programming are always pushing boundaries and opening new doors

I first discovered AngularJS during an internship in 2016. I was working on a project using Ionic, a framework for building hybrid mobile apps. Ionic was built on top of AngularJS, and that’s how I became interested. I loved how AngularJS made it easy to structure my code, build reusable components.

As I learned more, I realized that AngularJS was just the beginning. The JavaScript ecosystem was rapidly expanding, and new frameworks like React and Vue.js were becoming popular. But AngularJS had a special place in my heart because it was my first introduction to modern front-end development.

← ← ← ← ← ← ← ← ← ← ← ← ← Lets rewind the clock and revisit the past

JavaScript: From Scripting Language to Frameworks

JavaScript was created in just 10 days in May 1995 by Brendan Eich. At first, it was seen as a simple scripting language for making web pages interactive. For years, it was considered a tool for “amateurs,” but that changed in 2004 with the launch of Gmail. Gmail showed the world what JavaScript could do — creating fast, responsive web applications without constant page reloads. This was the birth of Ajax (Asynchronous JavaScript and XML), which revolutionized web development.

Then came Google Maps in 2005, which took interactivity to a whole new level. These innovations sparked a JavaScript renaissance, with libraries like jQuery, Prototype, and Dojo making it easier to build dynamic websites.

In 2008, Google launched Chrome with its powerful V8 JavaScript engine. V8 made JavaScript faster by compiling it directly into machine code. This was a game-changer, and it paved the way for Node.js in 2009, which brought JavaScript to the server side.

This expansion of JavaScript’s capabilities didn’t stop with server-side development. It also opened up new possibilities for desktop application development. In 2013, GitHub released Electron, a framework that allows developers to build cross-platform desktop applications using web technologies like JavaScript, HTML, and CSS

Suddenly, JavaScript wasn’t just for browsers — it was everywhere.

The Rise of AngularJS

Around the same time as Node.js, another revolutionary technology came out: AngularJS. Developed by Misko Hevery and Adam Abrons in 2009, AngularJS was one of the first Model-View-Whatever (MV)* frameworks for building single-page applications (SPAs). It was officially supported by Google, which gave it instant credibility.

AngularJS introduced concepts like two-way data binding, dependency injection, and directives, which made it easier to build complex web applications. For the first time, developers could create rich, interactive apps without writing tons of boilerplate code.

The Evolution of Angular

In 2016, Google released Angular 2, a complete rewrite of AngularJS. Unlike AngularJS, which was based on JavaScript, Angular 2 was built with TypeScript, a statically typed superset of JavaScript. This was a huge shift, and it divided the community. Some people loved the new features, like component-based architecture and better performance, while others missed the simplicity of AngularJS.

Over the years, Angular continued to grow. Each new version brought improvements, like Angular Universal for server-side rendering, Ivy Renderer for smaller bundle sizes, and Angular Elements for creating reusable web components.

Angular 17: A New Renaissance

Fast forward to 2023, and we have Angular 17. This version feels like a renaissance for Angular. It’s faster, more modern, and easier to use than ever before. Some of the standout features include:

Standalone Components: No more NgModules! You can now create components without needing to declare them in a module.
Improved Performance: Angular 17 is optimized for speed, with better change detection and smaller bundle sizes.
Enhanced Developer Experience: The Angular CLI has been upgraded with better tools for debugging, testing, and building apps.
Signal-Based Reactivity: Inspired by frameworks like Solid.js, Angular 17 introduces a new way to manage state with signals, making apps more reactive and efficient.

The Future of Angular

So, what’s next for Angular? The future looks bright. The Angular team is focused on making the framework more developer-friendly and performant. They’re also exploring new ways to integrate with emerging technologies, like WebAssembly and AI-driven development tools.

For me, Angular has come a long way since my internship in 2016. It’s no longer just a framework — it’s a complete ecosystem for building modern web applications. Whether you’re a beginner or an experienced developer, Angular has always something to offer.

Final Thoughts

JavaScript’s journey from a simple scripting language to the backbone of modern web development is nothing short of incredible. And Angular has played a huge role in that story. From AngularJS to Angular 19+, the framework has changed and improved over time to meet the needs of developers and businesses alike.

As for me, I’m excited to see where Angular goes next. I can’t wait to see how it continues to shape the future of web development.

What about you? Have you used Angular? What do you think of its evolution? Let me know in the comments!

Bonus

If you’re really interested in the origin story of Angular, I recommend watching Angular : The Documentary | An origin story. This documentary talks about framework’s beginnings, evolution, and challenges.

Angular : The Documentary | An origin story