Your First Angular Component

A component is the unit you will build almost everything from. This lesson creates a small Welcome component, explains its parts and places it on the page.

What you will learn

• How to generate a component with the CLI
• What each part of the @Component decorator does
• How to use one component inside another

Generate a component

In your project folder, run:

ng generate component welcome

ng g c welcome is the short form. The CLI creates a folder src/app/welcome with four files: welcome.ts, welcome.html, welcome.css and welcome.spec.ts. The generated class looks like this:

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

@Component({
  imports: [],
  selector: 'app-welcome',
  styleUrl: './welcome.css',
  templateUrl: './welcome.html',
})
export class Welcome {}

What the decorator options mean

• selector is the HTML tag name for the component. The CLI adds the prefix app- so your tags never clash with standard HTML.
• templateUrl points to the HTML file for the component. You can write template instead and put the HTML directly in the class.
• styleUrl points to the CSS for this component. These styles apply only to this component, so they will not leak into the rest of the page.
• imports lists other components that this template may use.

Fill in the component

Replace the contents of the three files with the following. First the class, which we shorten by removing the empty imports list:

// src/app/welcome/welcome.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.html',
  styleUrl: './welcome.css',
})
export class Welcome {}

Then the template:

<!-- src/app/welcome/welcome.html -->
<section class="card">
  <h2>Welcome to Angular</h2>
  <p>This text comes from my first component.</p>
</section>

And a style for it:

/* src/app/welcome/welcome.css */
.card {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px;
  max-width: 360px;
}

Use it in the root component

A component only appears when another component's template uses its selector, and that other component must list it in imports. Update app.ts:

// src/app/app.ts
import { Component } from '@angular/core';
import { Welcome } from './welcome/welcome';

@Component({
  imports: [Welcome],
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

And use the tag in app.html:

<!-- src/app/app.html -->
<main>
  <h1>My first Angular app</h1>
  <app-welcome />
  <app-welcome />
</main>

Save and look at the browser. The card appears twice, because each tag creates a separate instance of the component. This reuse is one of the main reasons to split a screen into components.

Try it yourself

1. Generate a component called about-me that shows your name and a short bio, and add it to the page.
2. Give the card a background colour in its CSS file and confirm that the other component is not affected.
3. Rewrite Welcome to use an inline template instead of templateUrl.

Quick check

1. Which option decides the HTML tag name of a component?
2. Why must a component be listed in imports before you use it?
3. What happens if you place the same tag twice?

Next, continue with Angular CLI Guide: ng new, ng update, Multiple Apps and Multiple Angular Versions.