Angular Basics

Preview — 3 of 10 questions

What is the minimum required structure of a standalone Angular component?

javascript

@Component({
  selector: 'app-user',
  template: `<h1>{{ name }}</h1>`,
})
export class UserComponent {
  name = 'Alice';
}

AAn Angular component must always have separate .html and .css files

BAn Angular component must explicitly declare standalone: true

CAn Angular component needs a @Component decorator with at least a selector and a template (or templateUrl), plus an exported TypeScript class

DAn Angular component must extend a BaseComponent class

What is the difference between {{ title }} and [title]="title"?

javascript

@Component({
  template: `
    <h1>{{ title }}</h1>
    <img [src]="imageUrl" [alt]="title" />
    <div [title]="title">Hover me</div>
  `
})
export class CardComponent {
  title = 'Angular Basics';
  imageUrl = 'logo.png';
}

A{{ title }} and [title]="title" are identical — just syntactic sugar

B{{ title }} converts the value to a string and inserts it into the DOM node's text content; [title]="title" binds a DOM property to a TypeScript expression — the value is not automatically converted to a string

C[title] only works on Angular components, not on native HTML elements

DInterpolation {{ }} only works for numbers

How do you capture the value typed into an <input> with Angular event binding?

javascript

@Component({
  template: `
    <input (input)="onInput($event)" placeholder="Search..." />
    <p>You typed: {{ searchTerm }}</p>
  `
})
export class SearchComponent {
  searchTerm = '';

  onInput(event: Event) {
    // How do you get the input value here?
  }
}

Athis.searchTerm = event.value

Bthis.searchTerm = (event.target as HTMLInputElement).value

Cthis.searchTerm = event.data

Dthis.searchTerm = $event.target.value directly inside the method

Answer all 10 questions (7 more), see explanations for every answer, and track your score.