What is a component in Angular and what does its decorator contain?
Understand what an Angular component is and what the @Component decorator contains — selector, template, and styles — with clear examples for interviews.
Expected Interview Answer
A component is the fundamental building block of an Angular UI — a TypeScript class paired with an HTML template that controls a section of the screen, and its @Component decorator supplies the metadata Angular needs to render it.
The @Component decorator contains configuration such as selector (the custom tag used in HTML), template or templateUrl (the view markup), styles or styleUrls (scoped CSS), and options like providers, encapsulation, and changeDetection. The class holds the data and logic (properties and methods), while the template binds to them. Components are composed into a tree to build the whole application.
- Encapsulates UI markup, styles, and logic together
- Reusable and composable across the app
- Scoped CSS avoids global style leaks
- Clear separation via the class-and-template pair
- Testable units of the interface
AI Mentor Explanation
A component is like a single player with a defined role — the class is the player's skill set and decisions, the template is how they appear on the field, and the @Component decorator is the team sheet entry listing their position (selector), kit (styles), and instructions (metadata). Eleven such players compose into a full team, just as components compose into an app.
Step-by-Step Explanation
Step 1
Create the class
Define a TypeScript class holding the component's data properties and methods.
Step 2
Add the decorator
Apply @Component above the class to mark it as an Angular component and attach metadata.
Step 3
Set the selector
Give it a selector like 'app-user' so it can be used as a custom HTML tag.
Step 4
Provide the template
Use template (inline) or templateUrl (external file) for the view markup.
Step 5
Add scoped styles
Supply styles or styleUrls; Angular scopes them to this component by default.
What Interviewer Expects
- Definition of a component as class + template
- Knowledge of the @Component decorator's purpose
- Key metadata keys: selector, template/templateUrl, styles/styleUrls
- Awareness of style encapsulation
- Understanding that components form a tree
Common Mistakes
- Confusing a component with a module or service
- Forgetting the selector or misusing templateUrl vs template
- Thinking styles are global by default
- Omitting the @Component decorator on the class
Best Answer (HR Friendly)
“A component is a reusable building block of an Angular app that controls a piece of the screen. It combines a TypeScript class for logic with an HTML template for display, and a special @Component decorator tells Angular its tag name, template, and styles.”
Code Example
import { Component } from '@angular/core';
@Component({
selector: 'app-user',
template: '<p>{{ username }}</p>',
styles: ['p { font-weight: bold; }'],
})
export class UserComponent {
username = 'Ada';
}Follow-up Questions
- What is the difference between template and templateUrl?
- How does Angular scope a component's styles?
- What is the purpose of the selector property?
- How do components communicate using @Input and @Output?
- What is ViewEncapsulation in Angular?
MCQ Practice
1. Which decorator marks a class as an Angular component?
@Component attaches the metadata Angular needs to treat a class as a component and render its template.
2. Which property defines the custom HTML tag for a component?
The selector specifies the tag name (e.g. app-user) used to place the component in markup.
3. By default, component styles in Angular are?
Angular uses ViewEncapsulation to scope styles to the component so they do not leak globally.
Flash Cards
What is an Angular component? — A class plus template that controls a portion of the UI.
What does @Component provide? — Metadata like selector, template/templateUrl, and styles/styleUrls.
What is the selector? — The custom HTML tag used to render the component.
Are component styles global? — No — they are scoped to the component by default.