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.