Q1. What is a component in Angular?
A component is a building block that controls a part of the UI. It consists of: a TypeScript class with @Component decorator, an HTML template, and optional styles. The class contains data and logic, while the template defines the view. Components communicate with each other via inputs and outputs. Every Angular app has at least one component (AppComponent).
Q2. What is the @Component decorator?
@Component is a decorator that marks a class as an Angular component and provides metadata. Key properties: selector (CSS selector to use the component), templateUrl (path to HTML template), styleUrls (array of style files), encapsulation (view encapsulation mode), and changeDetection (change detection strategy). It tells Angular how to create and use the component.
Q3. What is the difference between a component and a directive?
A component is a directive with a template. Components are the main UI building blocks. Directives (structural and attribute) modify the DOM or behavior without templates. Structural directives (ngIf, ngFor) change the DOM layout, while attribute directives (ngClass, ngStyle) change appearance or behavior.
Q4. How do you create a nested component?
Create a child component with its own selector. In the parent component''s template, use that selector. Example:
Q5. What is view encapsulation in Angular?
View encapsulation defines how component styles are applied. Options: Emulated (default) - styles are scoped to the component using attributes, Native (Shadow DOM) - uses browser''s shadow DOM, and None - styles are global. Emulated mode provides style isolation without requiring shadow DOM support.