Create your first component

• ✔️
  Generate a component

  Learn how to create a new component using the Angular CLI.

• ✔️
  Display the component

  Learn how to display the component HTML content in the application.

Angular CLI

You already used the CLI to serve the application locally with the ng serve command in the Getting Started step. Now let’s use it to create a new component!

The Angular CLI provides a command to generate a new component with the ng generate component component-name command.

🎓 Instructions

1. Run the following command in a terminal to generate a new component called task-list.

   ng generate component task-list

2. Check for a new folder called task-list in the src/app folder.

Note

This new folder contains the three following files:

• task-list.component.ts
• task-list.component.html
• task-list.component.css

That’s the same structure as the AppComponent component.

Component metadata

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

task-list.component.ts

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

  ngOnInit() {}
}

The @Component decorator defines the metadata for the component.

The selector property defines the component’s CSS element selector. By using this selector in a template HTML file, Angular creates and displays an instance of the component.

The templateUrl property defines the HTML template file for the component. That’s the HTML template that will be displayed when the css selector is used in another HTML file.

The styleUrls property defines the CSS files for the component. These styles will be applied to the component HTML template.

Display the component

So far the application only displays the app component HTML content in the browser. You generated the new component but you need to display its HTML content by using its selector.

🎓 Instructions

1. Update the src/app/app.component.html file.

   app.component.html

   <header>
       <h1>Angular Practical course</h1>
   </header>
   
   <main class="container pt-4">
       <app-task-list />
   </main>

2. Check out the changes in your browser.

   

Tip

task-list works! is displayed in the browser. That’s the default content generated by the Angular CLI in the component HTML file. You’ll update it in the upcoming chapters.

// TODO add mention about appModule update

✔️ What you learned

In this chapter, you learned how to create a new component using the Angular CLI and how to use it in your application.

🚦 Quiz

What is the command to create a new component using the Angular CLI?

1. ng generate component task-list
2. ng new task-list
3. ng create component task-list
4. ng component task-list

What is the property used to define the component ‘app-task-list’?

1. name
2. selector
3. title
4. tag

is Angular CLI meant to only create components?

1. Yes
2. No

Given the component is generated with the command ng generate component task-list, what is the name of the selector component?

1. app-task-list
2. task-list
3. app-task
4. task list

What the template term refers to in Angular?

1. The component.ts file?
2. The component.html file?

🔗 Resources

• Angular CLI component generation documentation