Display the Component

Chapter Objective

Learn how to display the component’s HTML template in the application.

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:

✘ [ERROR] NG8001: 'app-task-list' is not a known element:
1. If 'app-task-list' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-task-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]

    src/app/app.html:5:0:
      5 │ <app-task-list/>
        ╵ ~~~~~~~~~~~~~~~~

  Error occurs in the template of component App.

    src/app/app.ts:7:15:
      7 │   templateUrl: './app.html',
        ╵                ~~~~~~~~~~~~

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

app.ts

 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:

app.ts

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

---

Instructions

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

   app.ts

   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";
   }

2. 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>

3. 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