[Solved] Given this component code:@Component({ selector: 'app-test', templa... }'], encapsulation: ViewEncapsulation.None }) export class TestComponent {}What color will the paragraph text be in the browser? | Angular

Angular - Components

Given this component code:

@Component({
  selector: 'app-test',
  template: `Hello`,
  styles: ['.text { color: red; }'],
  encapsulation: ViewEncapsulation.None
})
export class TestComponent {}

What color will the paragraph text be in the browser?

ARed only inside this component

BRed globally on all paragraphs with class 'text'

CDefault browser color (no red)

DBlue, because styles are overridden

Step-by-Step Solution

Solution:

Step 1: Understand effect of ViewEncapsulation.None
Styles are not scoped and apply globally to matching selectors.
Step 2: Analyze style selector and impact
All paragraphs with class 'text' in the app will have red color.
Final Answer:
Red globally on all paragraphs with class 'text' -> Option B
Quick Check:
None encapsulation = global styles [OK]

Quick Trick: None encapsulation makes styles global, not scoped [OK]

Common Mistakes:

Thinking styles apply only inside component
Assuming default color
Confusing with ShadowDom scoping

Master "Components" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Given this component code:

Step 1: Understand effect of ViewEncapsulation.None

Step 2: Analyze style selector and impact

Final Answer:

Quick Check:

Want More Practice?