Angular Academy · Lesson

Importing Dependencies Directly

Add imports to a component instead of a module.

Importing Dependencies Directly is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Importing Dependencies Directly

A standalone component declares what it uses in its own imports array. This replaces the NgModule declarations/imports split.

The imports Array

Add other standalone components, directives, and pipes to the imports array of the @Component decorator.

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  imports: [ChildComponent],
  template: '<app-child></app-child>'
})
export class ParentComponent {}

Importing Other Components

To render a child component in your template, import its class. Then its selector becomes usable.

Importing Directives

Standalone directives are imported the same way. Once imported, you can apply them in the template.

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-note',
  imports: [HighlightDirective],
  template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}

Importing Pipes

Standalone pipes also go in imports. For example, importing a custom pipe lets you use it in interpolation.

Common Angular Directives

Some built-in helpers come from packages. For instance, RouterLink comes from @angular/router and must be imported to be used.

import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-nav',
  imports: [RouterLink],
  template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}

FormsModule and Friends

You can import existing NgModules into a standalone component too. Importing FormsModule enables template-driven forms features like ngModel.

import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  imports: [FormsModule],
  template: '<input [(ngModel)]="name">'
})
export class FormComponent {
  name = '';
}

Built-in Control Flow Needs No Import

The built-in control flow blocks (if, for, switch, defer) are part of the template language itself, so they require no import. This differs from the older structural directives.

Only Import What You Use

Keep imports minimal: list only the dependencies the template actually references. This keeps components lean and tree-shakeable.

Importing Multiple Items

The imports array can list many items together.

imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]

Compilation Errors Guide You

If you use a selector or pipe that is not imported, Angular reports a clear error telling you it is not known in that component. Add it to imports to fix it.

Quick Check: Imports

Where do standalone dependencies go?

Recap: Direct Imports

Standalone components list their dependencies in the component imports array: other components, directives, pipes, and even NgModules like FormsModule. Built-in control flow needs no import. Keep imports minimal. Next: bootstrapping a standalone app.

Frequently asked questions

Is the “Importing Dependencies Directly” lesson free?

Yes — the full text of “Importing Dependencies Directly” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Importing Dependencies Directly”?

Add imports to a component instead of a module. 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; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Importing Dependencies Directly” 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