Bird
0
0

Given this component decorator:

medium📝 component behavior Q13 of 15
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<p>{{ message }}</p>
B<p>Hi!</p>
CAn empty paragraph <p></p>
DError: message is undefined
Step-by-Step Solution
Solution:
  1. Step 1: Understand Angular interpolation

    The double curly braces {{ message }} bind to the component's property 'message'.
  2. Step 2: Check the value of 'message' in the component

    It is set to 'Hi!', so Angular replaces {{ message }} with 'Hi!'.
  3. Final Answer:

    <p>Hi!</p> -> Option B
  4. Quick Check:

    Interpolation shows property value = A [OK]
Quick Trick: {{ }} shows property value, not raw text [OK]
Common Mistakes:
  • Thinking interpolation shows raw {{ message }}
  • Assuming message is undefined without constructor
  • Expecting empty output without initialization

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes