Component Basics

Preview — 3 of 10 questions

In Angular, what is the primary purpose of the @Component decorator?

javascript

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css'],
  standalone: true,
})
export class HeroComponent {}

AIt registers the class as an injectable service

BIt declares global styles for the entire application

CIt marks a class as an Angular component and provides metadata such as selector, template, and styles

DIt enables two-way data binding automatically

Which syntax is used to display a component property value in an Angular template?

javascript

@Component({
  selector: 'app-greeting',
  template: `<h1>Hello, {{ name }}!</h1>`,
  standalone: true,
})
export class GreetingComponent {
  name = 'Angular';
}

A[property]

B(property)

C{{ property }}

D*property

What does [src]="imageUrl" do in an Angular template?

javascript

@Component({
  selector: 'app-avatar',
  template: `<img [src]="imageUrl" [alt]="altText">`,
  standalone: true,
})
export class AvatarComponent {
  imageUrl = 'https://example.com/avatar.png';
  altText = 'User avatar';
}

AIt sets the src attribute using string interpolation

BIt binds the DOM property src to the component's imageUrl property

CIt listens to the src event on the element

DIt applies a CSS class named imageUrl

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