Component Basics — Series 3

Preview — 3 of 10 questions

What happens with two files in styleUrls?

javascript

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css', './card-theme.css'],
})

AOnly the last file in the array is actually applied; the rest are ignored

BBoth stylesheets are loaded and their rules are concatenated into the same scoped style block for this component, applied in the order listed

CThis is invalid — a component can only have one stylesheet

DThe two files must define the same selectors or Angular throws at build time

What does the first <app-badge> (no role given) end up with?

javascript

@Component({ selector: 'app-badge', ... })
export class BadgeComponent {
  @Input() role: string = 'user';
}

Arole is undefined, because a plain attribute like role="admin" doesn't count as a binding for @Input()

BAngular throws because role is required and nothing was passed

Crole is null

Drole keeps its class-field default, 'user' — an @Input() with no binding provided simply never gets overwritten, so the property initializer's value stands

What is $event here?

javascript

<button (click)="onSave($event)">Save</button>

AThe event object Angular's (click) binding hands over is the real, native browser MouseEvent dispatched by the DOM — Angular doesn't wrap or transform it for a native DOM event binding

BAn Angular-specific wrapper object that must be unwrapped before use

CA string containing the event's name, 'click'

Dundefined, since $event only exists for custom @Output() events

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