Creating components with CLI in Angular - Try It Yourself

Creating Angular Components with CLI

📖 Scenario: You are building a simple Angular app for a local library. You want to create a component to show book details.

🎯 Goal: Learn how to create an Angular component using the Angular CLI and set it up in your app.

📋 What You'll Learn

Use Angular CLI to generate a component named book-details

Add a configuration variable showDetails in the component TypeScript file

Use the showDetails variable in the component template to conditionally show book information

Include the book-details component selector in the main app component template

💡 Why This Matters

🌍 Real World

Creating reusable UI parts in Angular apps is common for building interactive web pages.

💼 Career

Knowing how to generate and use components with Angular CLI is a fundamental skill for Angular developers.

1

Generate the book-details component using Angular CLI

Use the Angular CLI command ng generate component book-details to create a new component called book-details.

Angular

# Run the Angular CLI command to generate the component
# Your code here

Need a hint?

Open your terminal and type ng generate component book-details to create the component files.

2

Add a showDetails boolean variable in book-details.component.ts

In the book-details.component.ts file, add a public boolean variable called showDetails and set it to true.

Angular

export class BookDetailsComponent {
  // Add a public boolean variable showDetails set to true
  // Your code here
}

Need a hint?

Inside the BookDetailsComponent class, write public showDetails: boolean = true;

3

Use showDetails in the component template to conditionally display book info

In the book-details.component.html file, add an <h2> with text Book Title: Angular Basics that only shows if showDetails is true using Angular's *ngIf directive.

Angular

 with text 'Book Title: Angular Basics' that shows only if showDetails is true -->

Need a hint?

Use <h2 *ngIf="showDetails">Book Title: Angular Basics</h2> in the template.

4

Add the book-details component selector to the main app template

In the app.component.html file, add the <app-book-details></app-book-details> tag to display the book details component.

Angular

 tag to include the book-details component -->

Need a hint?

Insert <app-book-details></app-book-details> in app.component.html.