Components — Angular Technical Interview Questions & Answers

Components

Components

  • A component is one screen piece: decorator @Component, a class, a template. selector: 'app-student-card' lets you write <app-student-card> in a parent.
  • Inputs come in with @Input(). Outputs go out with @Output() EventEmitter. Parent owns the data. Child displays and asks. Don’t let the child rewrite the parent’s array in place.
  • Board: <app-student-card [student]="row" (save)="onSave($event)">. That is components talking. Trap: one giant AppComponent with 400 lines of HTML.
  Parent
    │ [student]
    ▼
  StudentCard
    │ (save)
    ▼
  Parent.onSave

Technical Interview Tip: Selector + @Input/@Output. Parent owns data.

Code Examples for Components

Components — working example

import { Component } from "@angular/core";

@Component({
  selector: "app-hello",
  template: `<h1>Hello {{ name }}</h1>`,
})
export class HelloComponent {
  name = "Angular";
}

Components — @Component ties a class to a selector + template.

How to Explain Components to an Interviewer

What is an Angular component?

@Component class + template selector

How do parent and child talk?

@Input @Output EventEmitter