Angular Academy · Lesson

The inject Function

Resolve dependencies with the inject function.

Lesson 2 of 413 steps

The inject Function is a free Angular Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

The inject Function

The inject() function retrieves a dependency from the injector. It is the modern alternative to constructor parameter injection.

Basic Usage

Call inject with the class you want, and assign the result to a field.

import { Component, inject } from '@angular/core';
import { DataService } from './data.service';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  private data = inject(DataService);
}

Compared to Constructor Injection

The older style declares dependencies as constructor parameters. inject() does the same job as a field initializer, which is often cleaner.

// old style:
// constructor(private data: DataService) {}

Where inject Can Be Called

inject() must run in an injection context: during construction of a component, directive, service, or in field initializers and provider factory functions.

Injecting in a Service

Use inject inside services too, for example to get the HttpClient.

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

@Injectable({ providedIn: 'root' })
export class Api {
  private http = inject(HttpClient);
}

Less Boilerplate

With inject you avoid long constructor signatures. Each dependency is a simple field declaration, easy to read and reorder.

Using Injected Services

Once injected, call the service like any object.

export class XComponent {
  private store = inject(CounterStore);
  add() { this.store.increment(); }
}

inject in Functional Guards

Functional route guards and resolvers run in an injection context, so you can call inject inside them to access services.

// export const authGuard = () => {
//   const auth = inject(AuthService);
//   return auth.isLoggedIn();
// };

Optional Dependencies

inject accepts options, such as marking a dependency optional so it returns null instead of throwing when not provided.

// const logger = inject(Logger, { optional: true });

Outside Injection Context

Calling inject outside an injection context (for example in a setTimeout callback) throws an error. Capture the dependency during construction instead.

Why Prefer inject

inject works well with mixins, base classes, and functional APIs, and keeps component classes concise. It is the recommended approach in modern Angular.

Quick Check: inject

Retrieving a dependency.

Answer it in the interactive lesson

Recap: inject

You learned the inject() function as the modern way to obtain dependencies, usable in components, services, and functional guards within an injection context. It reduces boilerplate versus constructor injection and supports options like optional. Next: providers and scopes.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “The inject Function” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “The inject Function”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

What will I learn in “The inject Function”?

Resolve dependencies with the inject function. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

How long does the “The inject Function” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy