Bird
0
0

Given this Angular component code, what will be rendered in the browser?

medium📝 component behavior Q13 of 15
Angular - Components
Given this Angular component code, what will be rendered in the browser?
@Component({
  selector: 'app-sample',
  template: `

Title

{{ description }}

` }) export class SampleComponent { description = 'Inline template example'; }
A<h1>Title</h1><p>{{ description }}</p>
B<h1>Title</h1><p>Inline template example</p>
CError: description is not defined
DNothing will render because templateUrl is missing
Step-by-Step Solution
Solution:
  1. Step 1: Understand inline template binding

    The template uses interpolation {{ description }} which Angular replaces with the component's property value.
  2. Step 2: Check component property value

    The property description is set to 'Inline template example', so it will appear inside the paragraph.
  3. Final Answer:

    <h1>Title</h1><p>Inline template example</p> -> Option B
  4. Quick Check:

    Interpolation shows property value in inline template [OK]
Quick Trick: Interpolation {{}} shows property value in template [OK]
Common Mistakes:
  • Thinking interpolation shows raw {{ description }} text
  • Confusing templateUrl requirement for inline templates
  • Assuming missing templateUrl causes error

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes