[Solved] Given this component decorator:@Component({ selector: 'app-hello', template:... }What will be rendered in the browser when <app-hello></app-hello> is used? | Angular

Angular - Components

Given this component decorator:

@Component({ selector: 'app-hello', template: '{{ message }}
' })
export class HelloComponent { message = 'Hi!'; }

What will be rendered in the browser when <app-hello></app-hello> is used?

A{{ message }}

BHi!

CAn empty paragraph 

DError: message is undefined

Step-by-Step Solution

Solution:

Step 1: Understand Angular interpolation
The double curly braces {{ message }} bind to the component's property 'message'.
Step 2: Check the value of 'message' in the component
It is set to 'Hi!', so Angular replaces {{ message }} with 'Hi!'.
Final Answer:
Hi! -> Option B
Quick Check:
Interpolation shows property value = A [OK]

Quick Trick: {{ }} shows property value, not raw text [OK]

Common Mistakes:

Master "Components" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this component decorator: