Components

Components provide structure for organizing your project into easy-to-understand parts with clear responsibilities so that your code is maintainable and scalable.

Here is an example of how a Todo application could be broken down into a tree of components.

In this guide, we'll take a look at how to create and use components in Angular.

Defining a Component

Every component has the following core properties:

1. A @Componentdecorator that contains some configuration
2. An HTML template that controls what renders into the DOM
3. A CSS selector that defines how the component is used in HTML
4. A TypeScript class with behaviors such as managing state, handling user input, or fetching data from a server.

Here is a simplified example of a TodoListItem component.

      
// todo-list-item.component.ts@Component({  selector: 'todo-list-item',  template: `    <li>(TODO) Read Angular Essentials Guide</li>  `,})export class TodoListItem {  /* Component behavior is defined in here */}
    

Other common metadata that you'll also see in components include:

• standalone: true — The recommended approach of streamlining the authoring experience of components
• styles — A string or array of strings that contains any CSS styles you want applied to the component

Knowing this, here is an updated version of our TodoListItem component.

      
// todo-list-item.component.ts@Component({  standalone: true,  selector: 'todo-list-item',  template: `    <li>(TODO) Read Angular Essentials Guide</li>  `,  styles: `    li {      color: red;      font-weight: 300;    }  `,})export class TodoListItem {  /* Component behavior is defined in here */}
    

Separating HTML and CSS into separate files

For teams that prefer managing their HTML and/or CSS in separate files, Angular provides two additional properties: templateUrl and styleUrl.

Using the previous TodoListItem component, the alternative approach looks like:

      
// todo-list-item.component.ts@Component({  standalone: true,  selector: 'todo-list-item',  templateUrl: './todo-list-item.component.html',  styleUrl: './todo-list-item.component.css',})export class TodoListItem {  /* Component behavior is defined in here */}
    

      
<!-- todo-list-item.component.html --><li>(TODO) Read Angular Essentials Guide</li>
    

      
/* todo-list-item.component.css */li {  color: red;  font-weight: 300;}
    

Using a Component

One advantage of component architecture is that your application is modular. In other words, components can be used in other components.

To use a component, you need to:

1. Import the component into the file
2. Add it to the component's imports array
3. Use the component's selector in the template

Here's an example of a TodoList component importing the TodoListItem component from before:

      
// todo-list.component.tsimport {TodoListItem} from './todo-list-item.component.ts';@Component({  standalone: true,  imports: [TodoListItem],  template: `    <ul>      <todo-list-item></todo-list-item>    </ul>  `,})export class TodoList {}
    

Next Step

Now that you know how components work in Angular, it's time to learn how we add and manage dynamic data in our application.