Components Overview
Imagine you are building a Lego house. Each Lego block is a small, self-contained piece that you can combine with others to create something bigger. In Angular, components are exactly that – reusable building blocks for your web application.
A component controls a part of the screen called a view. It consists of three things:
- Template – HTML that defines the structure.
- Class – TypeScript code that handles data and logic.
- Styles – CSS that defines the appearance.
Here is a basic component:
import { Component } from '@angular/core';
@Component({
selector: 'app-greeting',
template: `<h1>Hello, {{ name }}!</h1>`,
styles: [`h1 { color: blue; }`]
})
export class GreetingComponent {
name = 'World';
}
You can use this component in another template like this:
<app-greeting></app-greeting>
Two Minute Drill
- Components are the basic building blocks of Angular apps.
- Each component has a template (HTML), a class (TypeScript), and styles (CSS).
- The @Component decorator provides metadata: selector, template, styles.
- Use components by their selector in other templates.
- Components promote reusability and maintainability.
Need more clarification?
Drop us an email at career@quipoinfotech.com