Angular Academy · Lesson

Importing Dependencies Directly

Add imports to a component instead of a module.

Lesson 3 of 413 steps

Importing Dependencies Directly is a free Angular Academy lesson on CoddyKit. This is lesson 3 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.

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?

Answer it in the interactive lesson

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.

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 “Importing Dependencies Directly” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Importing Dependencies Directly”, 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 “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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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