Angular Web Framework Components & Templates — Questions and Answers
Question 1: What is a component in Angular?
- A TypeScript class with an HTML template and optional CSS that controls a portion of the UI (Correct answer)
- A database model for storing application data
- A server-side API endpoint
- A CSS framework for styling
Correct answer: A TypeScript class with an HTML template and optional CSS that controls a portion of the UI
An Angular component is a TypeScript class decorated with @Component that defines a selector, template (HTML), and styles (CSS), managing a specific portion of the user interface.
Question 2: What is data binding in Angular?
- The mechanism for synchronizing data between the component class and its template (Correct answer)
- A database connection configuration
- A method for compressing data during transmission
- A CSS property for text alignment
Correct answer: The mechanism for synchronizing data between the component class and its template
Data binding establishes communication between the component's TypeScript class and its HTML template, enabling automatic updates when data changes in either direction.
Question 3: What is the difference between interpolation and property binding?
- Interpolation uses {{}} for text; property binding uses [] for DOM properties (Correct answer)
- They are identical features
- Interpolation only works with numbers
- Property binding only works with strings
Correct answer: Interpolation uses {{}} for text; property binding uses [] for DOM properties
Interpolation ({{ expression }}) inserts evaluated expressions as text content, while property binding ([property]='expression') sets DOM element properties or component input properties directly.
Question 4: What are structural directives in Angular?
- Directives like *ngIf and *ngFor that change the DOM layout by adding or removing elements (Correct answer)
- CSS classes applied to style elements
- TypeScript interfaces for data models
- Server-side rendering configurations
Correct answer: Directives like *ngIf and *ngFor that change the DOM layout by adding or removing elements
Structural directives (*ngIf, *ngFor, *ngSwitch) modify the DOM structure by conditionally adding, removing, or manipulating HTML elements based on expressions.
Question 5: What is the @Input() decorator used for?
- To define a property that can receive data from a parent component (Correct answer)
- To get user keyboard input
- To read data from an input file
- To inject a service dependency
Correct answer: To define a property that can receive data from a parent component
@Input() marks a component property as bindable, allowing parent components to pass data down to child components through property binding in the template.
Question 6: What is the @Output() decorator and EventEmitter used for?
- To emit custom events from a child component to its parent (Correct answer)
- To output data to the console
- To write files to the filesystem
- To send HTTP responses
Correct answer: To emit custom events from a child component to its parent
@Output() combined with EventEmitter allows child components to emit custom events that parent components can listen to and respond to, enabling child-to-parent communication.
Angular Web Framework Components & Templates
What is a component in Angular?