You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The fundamental building block for creating applications in Angular.
3
+
</docs-decorative-header>
4
+
5
+
Components provide structure for organizing your project into easy-to-understand parts with clear responsibilities so that your code is maintainable and scalable.
6
+
7
+
Here is an example of how a Todo application could be broken down into a tree of components.
8
+
9
+
```mermaid
10
+
flowchart TD
11
+
A[TodoApp]-->B
12
+
A-->C
13
+
B[TodoList]-->D
14
+
C[TodoMetrics]
15
+
D[TodoListItem]
16
+
```
17
+
18
+
In this guide, we'll take a look at how to create and use components in Angular.
19
+
20
+
## Defining a Component
21
+
22
+
Every component has the following core properties:
23
+
24
+
1. A `@Component`[decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) that contains some configuration
25
+
2. An HTML template that controls what renders into the DOM
26
+
3. A [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML
27
+
4. A TypeScript class with behaviors such as managing state, handling user input, or fetching data from a server.
28
+
29
+
Here is a simplified example of a TodoListItem component.
30
+
31
+
```ts
32
+
// todo-list-item.component.ts
33
+
@Component({
34
+
selector: 'todo-list-item',
35
+
template: `
36
+
<li>(TODO) Read Angular Essentials Guide</li>
37
+
`,
38
+
})
39
+
exportclassTodoListItem {
40
+
/* Component behavior is defined in here */
41
+
}
42
+
```
43
+
44
+
Other common metadata that you'll also see in components include:
45
+
46
+
-`standalone: true` — The recommended approach of streamlining the authoring experience of components
47
+
-`styles` — A string or array of strings that contains any CSS styles you want applied to the component
48
+
49
+
Knowing this, here is an updated version of our `TodoListItem` component.
50
+
51
+
```ts
52
+
// todo-list-item.component.ts
53
+
@Component({
54
+
standalone: true,
55
+
selector: 'todo-list-item',
56
+
template: `
57
+
<li>(TODO) Read Angular Essentials Guide</li>
58
+
`,
59
+
styles: `
60
+
li {
61
+
color: red;
62
+
font-weight: 300;
63
+
}
64
+
`,
65
+
})
66
+
exportclassTodoListItem {
67
+
/* Component behavior is defined in here */
68
+
}
69
+
```
70
+
71
+
### Separating HTML and CSS into separate files
72
+
73
+
For teams that prefer managing their HTML and/or CSS in separate files, Angular provides two additional properties: `templateUrl` and `styleUrl`.
74
+
75
+
Using the previous `TodoListItem` component, the alternative approach looks like:
76
+
77
+
```ts
78
+
// todo-list-item.component.ts
79
+
@Component({
80
+
standalone: true,
81
+
selector: 'todo-list-item',
82
+
templateUrl: './todo-list-item.component.html',
83
+
styleUrl: './todo-list-item.component.css',
84
+
})
85
+
exportclassTodoListItem {
86
+
/* Component behavior is defined in here */
87
+
}
88
+
```
89
+
90
+
```html
91
+
<!-- todo-list-item.component.html -->
92
+
<li>(TODO) Read Angular Essentials Guide</li>
93
+
```
94
+
95
+
```css
96
+
// todo-list-item.component.css
97
+
li {
98
+
color: red;
99
+
font-weight: 300;
100
+
}
101
+
```
102
+
103
+
## Using a Component
104
+
105
+
One advantage of component architecture is that your application is modular. In other words, components can be used in other components.
106
+
107
+
To use a component, you need to:
108
+
109
+
1. Import the component into the file
110
+
2. Add it to the component's `imports` array
111
+
3. Use the component's selector in the `template`
112
+
113
+
Here's an example of a `TodoList` component importing the `TodoListItem` component from before:
Components provide structure for organizing your project into easy-to-understand parts with clear responsibilities so that your code is maintainable and scalable.
0 commit comments