Access modifiers in components in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Effect of private modifier on component template binding

Consider this Angular component code snippet. What happens if you try to bind to a private property in the component's template?

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ secretMessage }}</p>`
})
export class SampleComponent {
  private secretMessage = 'Hidden Text';
}

A The template will display nothing but no error will occur.

B The template will display 'Hidden Text' without any error.

C The template binding will cause a compilation error because private properties are not accessible in templates.

D The Angular compiler will convert the private property to public automatically.

💡 Hint

Think about how Angular templates access component properties and the role of access modifiers.

In Angular, templates can only bind to public properties and methods of the component class. Private or protected members are not accessible in the template and cause compilation errors.

❓ state_output

intermediate

Access modifier effect on component method call

Given this Angular component, what will be the output when the callMethod() is triggered from the template?

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: `<button (click)="callMethod()">Click</button>`
})
export class DemoComponent {
  private showMessage() {
    console.log('Hello from private method');
  }

  callMethod() {
    this.showMessage();
  }
}

A Console logs 'Hello from private method' when button is clicked.

B Compilation error because private methods cannot be called from public methods.

C Runtime error because private methods are inaccessible inside the class.

D Nothing happens because private methods are ignored.

💡 Hint

Remember how access modifiers work inside the same class.

Private methods are accessible within the same class. The public method 'callMethod' can call the private method 'showMessage' without any issue.

📝 Syntax

advanced

Identify the invalid access modifier usage in Angular component

Which of the following Angular component property declarations will cause a TypeScript syntax error?

A public title: string = 'Welcome';

B private _count: number = 0;

C protected data: any;

D internal info: string = 'data';

💡 Hint

Check which access modifiers are valid in TypeScript classes.

'internal' is not a valid TypeScript access modifier. Only public, private, and protected are allowed.

🔧 Debug

advanced

Why does this Angular component fail to compile?

This Angular component code fails to compile. What is the cause?

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `<p>{{ message }}</p>`
})
export class TestComponent {
  protected message = 'Hello';
}

A The template syntax is incorrect.

B Protected properties cannot be accessed in the template, causing a compilation error.

C The selector name is invalid and causes an error.

D Missing constructor causes compilation failure.

💡 Hint

Consider Angular template access rules for class members.

Angular templates can only bind to public members. Protected members are not accessible and cause compilation errors.

🧠 Conceptual

expert

Access modifiers and Angular's change detection

Which statement best describes how Angular's change detection interacts with component properties of different access modifiers?

A Angular tracks all properties regardless of access modifier because change detection works on the component instance.

B Only public and protected properties are tracked; private properties are excluded.

C Angular's change detection only tracks public properties; private and protected properties are ignored.

D Change detection requires properties to be decorated with @Input to track changes, access modifiers do not matter.

💡 Hint

Think about how Angular accesses component properties during change detection.

Angular's change detection runs on the component instance and can access all properties regardless of access modifier. Access modifiers affect TypeScript compile-time checks but do not restrict runtime property access.

Practice

1. Which access modifier allows a component property to be used directly in its template in Angular?

easy

A. readonly

B. private

C. protected

D. public

Solution

1. Step 1: Understand template access rules

   Angular templates can only access properties and methods marked as public.

2. Step 2: Compare access modifiers

   private and protected members are not accessible in templates, only public members are.

3. Final Answer:

   public -> Option D

4. Quick Check:

   Templates access public members only [OK]

Hint: Templates can only see public members [OK]

Common Mistakes:

• Thinking private members are accessible in templates
• Confusing protected with public for template access
• Assuming readonly affects visibility

2. Which of the following is the correct syntax to declare a private property named count in an Angular component?

easy

A. count private: number;

B. private count: number;

C. protected count = number;

D. public count: number;

Solution

1. Step 1: Recall TypeScript property declaration syntax

   Access modifier comes first, then property name, colon, and type.

2. Step 2: Check each option

   private count: number; matches correct syntax: private count: number;. public count: number; is public, not private. protected count = number; has wrong assignment syntax. count private: number; has wrong order.

3. Final Answer:

   private count: number; -> Option B

4. Quick Check:

   Access modifier + name + colon + type [OK]

Hint: Access modifier comes before property name [OK]

Common Mistakes:

• Placing access modifier after property name
• Using assignment instead of type annotation
• Mixing up protected and private keywords

3. Consider this Angular component snippet:

export class MyComponent {
  private secret = 'hidden';
  public visible = 'shown';
}

Which property can be accessed in the component's template?

medium

A. secret

B. Both secret and visible

C. visible

D. Neither secret nor visible

Solution

1. Step 1: Identify access modifiers of properties

   secret is private, visible is public.

2. Step 2: Recall template access rules

   Templates can only access public members, so only visible is accessible.

3. Final Answer:

   visible -> Option C

4. Quick Check:

   Only public properties are template-accessible [OK]

Hint: Only public properties show in templates [OK]

Common Mistakes:

• Assuming private properties are accessible in templates
• Thinking both properties are accessible
• Confusing private with protected

4. Identify the error in this Angular component code:

export class DemoComponent {
  private title = 'Hello';
}

// In template:
// <h1>{{ title }}</h1>

medium

A. Template cannot access private property 'title'

B. No error, code works fine

C. Missing semicolon after title declaration

D. title should be declared as protected

Solution

1. Step 1: Check property access modifier

   title is declared private, so it is hidden from outside the class.

2. Step 2: Understand template access rules

   Angular templates can only access public properties, so trying to use title in template causes an error.

3. Final Answer:

   Template cannot access private property 'title' -> Option A

4. Quick Check:

   Private properties are not accessible in templates [OK]

Hint: Templates only see public, not private properties [OK]

Common Mistakes:

• Ignoring access modifier effect on templates
• Thinking missing semicolon causes error
• Confusing protected with private for template access

5. You want a property data in a base Angular component to be accessible in its child components but not directly in the template. Which access modifier should you use?

hard

A. protected

B. private

C. public

D. readonly

Solution

1. Step 1: Understand access modifier meanings

   private hides from all except the class itself, public exposes everywhere including templates, protected allows access in the class and its subclasses but not templates.

2. Step 2: Match requirement to modifier

   Since data should be accessible in child components but hidden from templates, protected fits perfectly.

3. Final Answer:

   protected -> Option A

4. Quick Check:

   Protected = accessible in children, hidden from templates [OK]

Hint: Use protected for child access, hide from templates [OK]

Common Mistakes:

• Choosing public and exposing property to templates
• Using private and blocking child access
• Confusing readonly with access control