# Components
Course: [Angular](https://www.devtutorials.ai/learn/angular) · Section: Angular Fundamentals
Source: https://www.devtutorials.ai/learn/angular/fundamentals/components
> What a component is, standalone components, creating one with the CLI, the @Component decorator and its metadata, selectors, templates and styles, and how to render, nest and reuse components.
## What Are Components?
A component is a reusable building block that defines one part of the user interface and the logic behind it.
An Angular app is a set of components, such as a header, a menu and a product card, placed inside one another.
Each component has three parts:
- **A class.** TypeScript code that stores the component's data and defines its methods, such as what happens when a button is clicked.
- **A template.** The HTML that defines what the component displays on the screen.
- **Styles.** The CSS that sets the component's colors, spacing and layout.
### Real-World Example
An e-commerce product page is typically split into components such as `Header`, `SearchBar`, `ProductGallery`, `PriceBox`, `ReviewList` and `CartButton`.
Each component has its own template, styles and logic, so a team can build and test `ReviewList` without touching `PriceBox`.
The same `ProductCard` component renders every item on the search results page, the wishlist and the "Recommended for you" section.
The decorator, the class, the template and the styles together make one component.
Run the code below. It is one complete component with all three parts.
```angular runnable title="One component: class, template and styles"
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Welcome, {{ studentName }}!
You have {{ lessons }} lessons left.
`,
styles: `
h2 { color: #dd0031; }
p { color: #555; }
`,
})
export class App {
studentName = 'Asha';
lessons = 12;
}
```
Change `studentName` to your own name and run it again. The heading changes, because the template reads its value from the class.
## Standalone Components
A component often uses other components. For example, `App` uses `Header` and `Footer`. Angular must know which components `App` is allowed to use.
A **standalone component** lists those components itself, in its own `imports` list:
```ts
@Component({
selector: 'app-root',
imports: [Header, Footer],
template: ``,
})
export class App {}
```
Older Angular apps did this differently. They used a separate file called a **module** (`NgModule`) to register components, and each component had to be added to that file before it could be used.
All new Angular components are standalone, so you do not need a module.
| Point | Old: module-based | New: standalone |
|---|---|---|
| Where a component is registered | Inside an `NgModule` file | No registration needed |
| How it uses other components | The module imports them | The component's own `imports` list |
| Extra files | One or more module files | None |
| Default in new projects | No | Yes |
In older code you may see `NgModule` files, or `standalone: true` written inside `@Component`. That setting turned a component into a standalone one. New Angular versions make every component standalone automatically, so you do not need to write it. Every example in this course uses standalone components.
## Creating Components
The easiest way to create a component is with the Angular CLI. Run this command inside your project folder:
```bash
ng generate component header
```
You can also use the short form:
```bash
ng g c header
```
The CLI creates a new folder with four files:
```text
src/app/header/
├── header.ts the component class
├── header.html the template
├── header.css the styles
└── header.spec.ts a test file
```
The class file looks like this:
```ts
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
imports: [],
templateUrl: './header.html',
styleUrl: './header.css',
})
export class Header {}
```
You can also write a component by hand. A component is a TypeScript class with the `@Component` decorator placed directly above it. In this course's practice editors, all the parts live in one file, so you can see everything at once.
```angular runnable title="A new Header component, used by App"
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
template: `📚 DevTutorials`,
styles: `header { padding: 8px 12px; background: #2563eb; color: white; border-radius: 6px; }`,
})
export class Header {}
@Component({
selector: 'app-root',
imports: [Header],
template: `
Start learning Angular today.
`,
})
export class App {}
```
## Component Decorator (`@Component`)
A **decorator** is a function, written with an `@` in front of its name, that adds information to the class below it. Angular reads this information to decide how to use the class.
`@Component` marks a class as a component. It also gives Angular the settings it needs to create the component: its tag name, its template and its styles.
```ts
@Component({
selector: 'app-welcome',
template: `
Hello!
`,
})
export class Welcome {}
```
Without `@Component`, the class is a plain TypeScript class. Angular cannot display it, because it has no template and no selector.
Put the decorator directly above the class, with nothing in between. Also import it first: `import { Component } from '@angular/core';`. If you forget the import, you get the error `Cannot find name 'Component'`.
## Component Metadata
The object inside `@Component({ ... })` is called **metadata**. Metadata is the configuration of the component: its tag name, its template, its styles and the other components it uses. Angular reads the metadata to create the component.
These are the metadata options you will use most:
| Option | What it does | Example |
|---|---|---|
| `selector` | The HTML tag name for the component | `'app-header'` |
| `template` | The HTML, written inside the class file | `` `
Hi
` `` |
| `templateUrl` | The path to a separate HTML file | `'./header.html'` |
| `styles` | The CSS, written inside the class file | `` `h1 { color: red; }` `` |
| `styleUrl` | The path to a separate CSS file | `'./header.css'` |
| `imports` | Other components this component uses | `[Header, Footer]` |
A component needs a template. Use either `template` or `templateUrl`, not both.
```angular runnable title="Every common metadata option in one component"
import { Component } from '@angular/core';
@Component({
selector: 'app-badge',
template: `NEW`,
styles: `span { background: #15803d; color: white; padding: 2px 8px; border-radius: 10px; font-size: 12px; }`,
})
export class Badge {}
@Component({
selector: 'app-root',
imports: [Badge],
template: `
Angular Components
`,
})
export class App {}
```
## Component Selector
The **selector** is the name of the component's HTML tag. When Angular finds this tag in another component's template, it creates the component at that position.
If the selector is `'app-badge'`, you write `` (or ``) where you want the badge to appear.
Write the selector as a tag. Angular shows the component in its place.
Selector names follow a few rules:
- Use lower case letters.
- Use a dash, such as `app-header`. A dash keeps your tags apart from normal HTML tags like `header`.
- Start with a short prefix. New projects use `app`, so names look like `app-header` and `app-footer`.
## Component Template
The **template** is the HTML that defines the content and structure a component displays on the screen.
A template is standard HTML plus Angular template syntax. The most common feature is **interpolation**. You write a class property name inside double curly braces, like `{{ title }}`, and Angular replaces it with the property's current value.
```angular runnable title="The template shows values from the class"
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
{{ course }}
Lessons: {{ lessons }}
Hours: {{ lessons * 0.5 }}
`,
})
export class App {
course = 'Angular Fundamentals';
lessons = 14;
}
```
Interpolation can also contain a simple expression. `{{ lessons * 0.5 }}` multiplies the value of `lessons` by 0.5 and displays the result.
## Component Styles
**Component styles** are CSS rules that apply only to one component's template.
Angular limits these rules to the component that declares them. A style written for one component does not change the elements of any other component. This is called **style encapsulation**.
Run the example. Both components have a `
` tag. Only the `App` paragraph turns red.
```angular runnable title="Styles stay inside their own component"
import { Component } from '@angular/core';
@Component({
selector: 'app-note',
template: `
`,
styles: `p { color: #dd0031; font-weight: bold; }`,
})
export class App {}
```
The rule `p { color: red }` lives in `App`. Angular applies it only to the paragraphs that `App` itself writes. The paragraph inside `Note` keeps its default color.
Component styles belong to the component. Use `src/styles.css` for styles that the whole app should share, such as fonts and page colors.
## Inline vs External Templates
You can store a template in one of two places.
An **inline template** is written inside the class file with `template`:
```ts
@Component({
selector: 'app-header',
template: `
My Store
`,
})
export class Header {}
```
An **external template** is written in its own `.html` file. The class points to it with `templateUrl`:
```ts
@Component({
selector: 'app-header',
templateUrl: './header.html',
})
export class Header {}
```
| Point | Inline (`template`) | External (`templateUrl`) |
|---|---|---|
| Where the HTML lives | Inside the `.ts` file | In a separate `.html` file |
| Best for | Short templates, a few lines | Longer templates |
| Editor help | Less HTML help | Full HTML highlighting and hints |
| Files to open | One | Two |
| What the CLI creates | No | Yes, by default |
A simple rule: if the HTML is longer than about three lines, move it to its own file.
The practice examples on this page keep each component in one file, so they use inline templates and inline styles. In a project created with the Angular CLI, each component keeps its template in an `.html` file and its styles in a `.css` file, and connects them with `templateUrl` and `styleUrl`.
## Inline vs External Styles
Styles can also be stored in one of two places.
**Inline styles** are written in the class file with `styles`:
```ts
@Component({
selector: 'app-header',
template: `
My Store
`,
styles: `h1 { color: navy; }`,
})
export class Header {}
```
**External styles** are written in a `.css` file. The class points to it with `styleUrl`:
```ts
@Component({
selector: 'app-header',
templateUrl: './header.html',
styleUrl: './header.css',
})
export class Header {}
```
| Point | Inline (`styles`) | External (`styleUrl`) |
|---|---|---|
| Where the CSS lives | Inside the `.ts` file | In a separate `.css` file |
| Best for | A few short rules | Many rules |
| Editor help | Less CSS help | Full CSS highlighting and hints |
| Stays inside the component | Yes | Yes |
Both forms keep the styles inside the component. The only difference is where you write them.
## Rendering Components
**Rendering** is the process in which Angular creates a component, builds the HTML from its template and inserts that HTML into the page.
Angular renders components in two situations:
1. **The root component** is started by `bootstrapApplication(App)` in `main.ts`. Angular puts it in the `` tag of `index.html`.
2. **Every other component** is rendered when another template uses its selector.
To render a component inside another one, take two steps:
1. Add the component class to the parent's `imports` list.
2. Write its selector tag in the parent's template.
```angular runnable title="Render the same component three times"
import { Component } from '@angular/core';
@Component({
selector: 'app-star',
template: `⭐`,
})
export class Star {}
@Component({
selector: 'app-root',
imports: [Star],
template: `
Rating:
`,
})
export class App {}
```
Each `` tag creates a new copy of the `Star` component. Add two more tags and run it again. You get a five-star rating.
## Nesting Components
**Nesting** means putting a component inside another component.
The outer component is the **parent**. The component inside it is the **child**. A child can have its own children, so the components form a tree.
A parent shows its children. Children can have their own children.
```angular runnable title="Components inside components"
import { Component } from '@angular/core';
@Component({
selector: 'app-product-card',
template: `
`,
})
export class App {}
```
Follow the tree from the top:
1. `App` displays a heading and the `ProductList` component.
2. `ProductList` displays its own heading and two `ProductCard` components.
3. Each parent imports only its own children. `App` does not import `ProductCard`.
## Reusable Components
A **reusable component** is a component you write once and use many times, each time with different data.
The parent passes data to the child through an **input**. An input is a class property that receives its value from the parent component. You mark a property as an input with `@Input()`. The parent then sets it in square brackets: `[title]="..."`.
One component, written once, shows different data each time.
```angular runnable title="One card component, three different courses"
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-course-card',
template: `
{{ title }}{{ hours }} hours
`,
styles: `
.card { display: flex; justify-content: space-between; padding: 8px 12px;
margin: 6px 0; border: 1px solid #c7d2fe; border-radius: 8px; background: #eef2ff; }
`,
})
export class CourseCard {
@Input() title = '';
@Input() hours = 0;
}
@Component({
selector: 'app-root',
imports: [CourseCard],
template: `
`,
})
export class App {}
```
The `CourseCard` code is written once. The three cards share the same template and styles, but each card displays the title and hours passed to it.
Reusable components remove duplicated code. When you fix a bug or change the design in `CourseCard`, every card in the app receives the change.
## Component Naming Conventions
Consistent names make a project easier to read and maintain. Angular projects follow the same naming rules, so any Angular developer can locate a component's files quickly.
| Item | Rule | Example |
|---|---|---|
| Class name | PascalCase: every word starts with a capital letter | `ProductCard` |
| Selector | Prefix, a dash, then lower-case words joined by dashes | `app-product-card` |
| Folder | Lower-case words joined by dashes | `product-card/` |
| Class file | Same as the folder | `product-card.ts` |
| Template file | Same name, `.html` | `product-card.html` |
| Style file | Same name, `.css` | `product-card.css` |
When you run `ng g c product-card`, the CLI follows all of these rules for you.
New Angular projects use short class names such as `ProductCard`. Older projects add the word "Component", such as `ProductCardComponent`, and name the file `product-card.component.ts`. Both work. Pick one style and use it in the whole project.
## Common Mistakes
| Mistake | What you see | Fix |
|---|---|---|
| Child not added to `imports` | `NG0304: ... is not a known element` | Add the child class to the parent's `imports` list |
| `Component` not imported | `Cannot find name 'Component'` | Add `import { Component } from '@angular/core';` |
| Selector without a dash | Clashes with normal HTML tags | Use a prefix, such as `app-header` |
| Using the class name as a tag | `` displays nothing | Use the selector: `` |
| Both `template` and `templateUrl` | A build error about the template | Use only one of them |
| Expecting component styles to reach a child | The child does not change | Style the child in its own component |
| Wrong path in `templateUrl` | `Could not find template file` | Check the file name, starting with `./` |
## Check Yourself
## Exercises
## What to Remember
- A component defines one part of the user interface. It combines a class (data and logic), a template (HTML) and styles (CSS).
- `@Component` metadata tells Angular the selector, the template, the styles and the imports.
- To display a child component, add its class to the parent's `imports` list and write its selector tag in the parent's template. Use `@Input()` to pass data into a reusable component.
Next: **Angular Templates**, how a template connects HTML to the data and methods in the class.