Angular Components — Interview Quick Revision

1. What is an Angular component?

An Angular component is the basic building block of the UI. It combines TypeScript logic, an HTML template, and styles to control a part of the screen.

2. What are the parts of a component?

A component mainly contains a TypeScript class, @Component metadata, HTML template, and CSS styles.
@Component({ selector, templateUrl, styleUrl })

3. How do you create a component using Angular CLI?

Use the Angular CLI ng generate component command.
ng generate component products or ng g c products

4. What is the purpose of the @Component decorator?

@Component tells Angular that a TypeScript class is a component and provides metadata such as selector, template, styles, and imports.
Component({ selector: 'app-product', templateUrl: './product.html' })

5. What is the difference between inline and external templates?

Inline: HTML is written directly using template. External: HTML is stored in a separate file using templateUrl.
template: '<h1>Hello</h1>' vs templateUrl: './app.html'

6. What is the difference between inline and external styles?

Inline: CSS is written inside the component using styles. External: CSS is stored in a separate file using styleUrl/styleUrls.
styles: ['h1 { color: red; }'] vs styleUrl: './app.css'

7. How does one component communicate with another?

Components commonly communicate using inputs and outputs for parent-child communication. Shared services, Signals, or RxJS can be used for unrelated components.

8. What is a parent component?

A parent component contains or uses another component in its template. It can pass data to the child through input properties.

9. What is a child component?

A child component is used inside another component's template. It can receive data through inputs and send events through outputs.

10. How do you pass data from parent to child?

Use an input property on the child and property binding in the parent.
<app-child [name]="userName" />

11. What are input properties?

Input properties allow a child component to receive data from its parent.
Traditional: @Input() name = ''; → Modern: name = input('');

12. How do you pass data from child to parent?

The child exposes an output event, and the parent listens to that event.
<app-child (saved)="onSaved($event)" />

13. What are output events?

Output events allow a child component to notify or send data to its parent.
Traditional: @Output() saved = new EventEmitter<string>();

14. What is EventEmitter?

EventEmitter is traditionally used with @Output() to emit custom events from child to parent.
this.saved.emit('Success');

15. What are input() and output() in modern Angular?

input() and output() are modern APIs for defining component inputs and outputs with less decorator-based syntax.
name = input<string>(); saved = output<string>();

16. What is content projection?

Content projection allows a parent to pass HTML/content into a child component's template. It helps create reusable container components such as cards and dialogs.

17. What is ng-content?

<ng-content> is the placeholder where projected parent content is displayed inside a child component.
<div class="card"><ng-content /></div>

18. What are view queries such as ViewChild?

View queries allow a component to access child components, directives, or DOM elements from its own template.
@ViewChild(ChildComponent) child!: ChildComponent;

19. What is the difference between ViewChild and ContentChild?

ViewChild accesses something from the component's own view/template.
ContentChild accesses projected content passed into the component through <ng-content>.