Create your first component

Chapter Objectives

Generate a component
Learn how to create a new component using the Angular CLI.
Display the component
Learn how to display the component’s HTML template in the application.

Angular CLI

You’ve already used the CLI to run our application locally with the ng serve command in the Getting Started section.

Now use it to create a new component as the Angular CLI also provide a dedicated command to generate a new component, ng generate component.

Instructions

Run the following command in a terminal to generate a new component called task-list
Terminal window
```
ng generate component task-list
```
or the short version:
Terminal window
```
ng g c task-list
```

Look for the generated folder called task-list in the src/app directory.

src
└─ app
   └─ task-list
       └─ task-list.component.ts
       └─ task-list.component.html
       └─ task-list.component.css

Component Metadata

When opening the task-list.ts file, you can see the following code:

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

@Component({
  selector: 'app-task-list',
  imports: [],
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskList {

}

The @Component decorator defines the component’s configuration metadata.

Note

A decorator is a way to do meta-programming. They can modify their target (classes, methods, …), call other methods when the target is called, or add metadata intended for a framework. This last point corresponds to how we use them in Angular.

The selector property defines the component’s HTML tag name. By using this selector in an HTML Template (view), Angular creates and displays an instance of the component.

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

@Component({
  selector: 'app-task-list',
  imports: [],
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskList {

}

The templateUrl property defines the location of the HTML Template (its view) for the component. This is the view that will be displayed when the CSS selector is used in another HTML Template.

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

@Component({
  selector: 'app-task-list',
  imports: [],
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskList {

}

The styleUrls property defines the locations of the component’s CSS files. These styles will be applied to the component’s template.

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

@Component({
  selector: 'app-task-list',
  imports: [],
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskList {

}

Global styles

Global styles can be defined in the src/styles.css file.

Display the Component

So far, the application only displays the HTML content of the App component in the browser. You’ve generated the new component but it’s still unused as Angular does no know where to use it: you need to use its selector app-task-list to display its HTML template.

As its selector is not a valid native HTML tag like <button>, we need to explain Angular its origin, otherwise it will display an error message:

// TODO add error message by testing the tutorial

To do this, you need to import the component in the app.ts file to get its reference:

 import { TaskList } from './task-list/task-list';

Then add it to the imports array of the @Component decorator for the component to understand it’s part of its context:

@Component({
    // ...
    imports: [RouterOutlet, TaskList],
    })
      export class App {
    }

Instructions

Update the templateproperty of the app.ts file as follows:

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


  import { TaskList } from './task-list/task-list';

  @Component({
  selector: 'app-root',

  imports: [RouterOutlet, TaskList],
  templateUrl: './app.html',
  stylesUrl: ['./app.css],
})
  export class App {
  protected title = 'angular-introduction-course';
}

Update the app.html file to display the task-list component:

 <div class="navbar bg-base-100 shadow-sm">
   <a class="btn btn-ghost text-xl">Task Manager</a>
 </div>

 <main class="m-12 max-w-screen-md mx-auto">
   <app-task-list />
 </main>

Check the changes in your browser.

Note

task-list works! appears in the browser. This is the default content generated by the Angular CLI in the component’s HTML Template. You will update it in the upcoming lessons.

What you've learned

In this chapter, you learned how to create a new component using the Angular CLI and use it in your application. You also remembered that the component’s view is its HTML Template and the component’s model is its TypeScript file.

Angular CLI Documentation: generating a component

← Previous Lesson

Components Introduction

Next Lesson →

Task Interface