Importing dependencies directly in Angular - Mini Project: Build & Apply

Importing dependencies directly in Angular

📖 Scenario: You are building a simple Angular standalone component that shows a greeting message. You want to import Angular's CommonModule directly into your component to use common directives like ngIf.

🎯 Goal: Create a standalone Angular component that imports CommonModule directly. Display a greeting message conditionally using *ngIf.

📋 What You'll Learn

Create a standalone Angular component named GreetingComponent

Import CommonModule directly in the component's imports array

Use *ngIf directive to conditionally show the greeting message

💡 Why This Matters

🌍 Real World

Standalone components with direct imports simplify Angular apps by reducing the need for NgModules and making components more reusable.

💼 Career

Understanding how to import dependencies directly in Angular components is essential for modern Angular development and improves code modularity and maintainability.

1

Create the standalone Angular component

Create a standalone Angular component named GreetingComponent with a template that contains a <h1> tag showing the text "Hello, Angular!". Use the @Component decorator with standalone: true.

Angular

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

// Create the standalone GreetingComponent below

Hint

Use @Component with standalone: true and a simple template string.

2

Import CommonModule directly in the component

Import CommonModule from @angular/common and add it to the imports array inside the @Component decorator of GreetingComponent.

Angular

import { Component } from '@angular/core';
// Import CommonModule from @angular/common

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `Hello, Angular!`,
  // Add imports array here
})
export class GreetingComponent {}

Hint

Remember to import CommonModule at the top and add it to the imports array in the decorator.

3

Add a boolean variable to control greeting visibility

Inside the GreetingComponent class, add a public boolean property named showGreeting and set it to true.

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-greeting',
  standalone: true,
  imports: [CommonModule],
  template: `Hello, Angular!`
})
export class GreetingComponent {
  // Add showGreeting boolean property here
}

Hint

Declare showGreeting as a class property and assign true.

4

Use *ngIf directive to conditionally show the greeting

Update the template in GreetingComponent to use the *ngIf directive with the showGreeting property to conditionally display the <h1> greeting message.

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-greeting',
  standalone: true,
  imports: [CommonModule],
  // Update template to use *ngIf with showGreeting
  template: ``
})
export class GreetingComponent {
  showGreeting = true;
}

Hint

Use *ngIf="showGreeting" inside the <h1> tag in the template.

Practice

1. What is the main purpose of importing dependencies directly in Angular?

easy

A. To create new Angular components automatically

B. To run Angular applications without a server

C. To use code from other files or libraries in your current file

D. To style components with CSS

Solution

1. Step 1: Understand what importing means

   Importing means bringing code from other files or libraries into your current file so you can use it.

2. Step 2: Identify the purpose in Angular

   In Angular, importing dependencies directly allows you to use components, services, or modules defined elsewhere.

3. Final Answer:

   To use code from other files or libraries in your current file -> Option C

4. Quick Check:

   Importing = Using external code [OK]

Hint: Importing means bringing code in from other files [OK]

Common Mistakes:

• Thinking importing creates components automatically
• Confusing importing with styling
• Assuming importing runs the app

2. Which of the following is the correct syntax to import the HttpClient from Angular's common HTTP package?

easy

A. import { HttpClient } from '@angular/common/http';

B. import HttpClient from '@angular/common/http';

C. import (HttpClient) from '@angular/common/http';

D. import * HttpClient from '@angular/common/http';

Solution

1. Step 1: Recall Angular import syntax

   Angular uses curly braces to import specific parts from a package or file.

2. Step 2: Match syntax with options

   import { HttpClient } from '@angular/common/http'; uses curly braces correctly: import { HttpClient } from '@angular/common/http';

3. Final Answer:

   import { HttpClient } from '@angular/common/http'; -> Option A

4. Quick Check:

   Curly braces for specific imports [OK]

Hint: Use curly braces to import specific parts [OK]

Common Mistakes:

• Omitting curly braces for named imports
• Using parentheses instead of braces
• Using incorrect import keywords

3. Given the following import statement in an Angular component:

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

What will happen if you remove the curly braces around Component?

medium

A. The import will work normally without errors

B. You will get a syntax error because named imports need curly braces

C. Angular will import the entire module instead

D. The component will import but not function correctly

Solution

1. Step 1: Understand named imports syntax

   Named imports require curly braces to specify exactly what to import from a module.

2. Step 2: Analyze removing curly braces effect

   Removing curly braces tries to import a default export, which @angular/core does not provide for Component, causing a syntax error.

3. Final Answer:

   You will get a syntax error because named imports need curly braces -> Option B

4. Quick Check:

   Named imports require braces [OK]

Hint: Named imports always need curly braces [OK]

Common Mistakes:

• Assuming import works without braces
• Confusing default and named imports
• Thinking Angular auto-corrects import syntax

4. You wrote this import in your Angular component:

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

But you get an error saying Cannot find module '@angular/router'. What is the most likely cause?

medium

A. RouterModule is not exported from @angular/router

B. You used curly braces incorrectly

C. You need to import RouterModule from @angular/core instead

D. You forgot to install the @angular/router package

Solution

1. Step 1: Understand the error message

   The error means the module '@angular/router' is not found in your project dependencies.

2. Step 2: Identify common cause

   This usually happens if the package is not installed via npm or yarn.

3. Final Answer:

   You forgot to install the @angular/router package -> Option D

4. Quick Check:

   Missing package causes module not found error [OK]

Hint: Check if package is installed when module not found [OK]

Common Mistakes:

• Assuming import syntax is wrong
• Importing from wrong package
• Ignoring installation step

5. You want to import two Angular features, NgIf and NgFor, from @angular/common in a single import statement. Which is the correct way to do this?

hard

A. import { NgIf, NgFor } from '@angular/common';

B. import NgIf, NgFor from '@angular/common';

C. import { NgIf } and { NgFor } from '@angular/common';

D. import * as NgIf, NgFor from '@angular/common';

Solution

1. Step 1: Recall syntax for multiple named imports

   Use one import statement with curly braces listing all names separated by commas.

2. Step 2: Check options for correct syntax

   import { NgIf, NgFor } from '@angular/common'; correctly imports both NgIf and NgFor in one statement with braces and commas.

3. Final Answer:

   import { NgIf, NgFor } from '@angular/common'; -> Option A

4. Quick Check:

   Multiple named imports use commas inside braces [OK]

Hint: List multiple imports inside one pair of braces separated by commas [OK]

Common Mistakes:

• Using multiple import statements unnecessarily
• Omitting commas between imports
• Using incorrect keywords like 'and' or '*'