Access modifiers in components in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the property accessible only within the component class.

Angular

export class MyComponent {
  [1] title = 'Hello Angular';
}

Drag options to blanks, or click blank then click option'

Aprivate

Bpublic

Cprotected

Dreadonly

Attempts:

3 left

💡 Hint

Common Mistakes

Using public makes the property accessible everywhere.

Using readonly only prevents changes but does not restrict access.

Using private makes the property accessible only inside the component class.

2fill in blank

medium

Complete the code to allow the property to be accessed by this class and its subclasses.

Angular

export class BaseComponent {
  [1] data = 42;
}

export class ChildComponent extends BaseComponent {
  showData() {
    console.log(this.data);
  }
}

Drag options to blanks, or click blank then click option'

Aprivate

Bprotected

Cpublic

Dreadonly

Attempts:

3 left

💡 Hint

Common Mistakes

Using private hides the property from subclasses.

Using public exposes the property everywhere.

protected allows access inside the class and its subclasses.

3fill in blank

hard

Fix the error in the code by choosing the correct access modifier for the method used in the template.

Angular

export class MyComponent {
  [1] getMessage() {
    return 'Welcome!';
  }
}

<!-- In template -->
<p>{{ getMessage() }}</p>

Drag options to blanks, or click blank then click option'

Apublic

Bprotected

Creadonly

Dprivate

Attempts:

3 left

💡 Hint

Common Mistakes

Using private or protected hides the method from the template.

Readonly is not an access modifier for methods.

Template can only access public members of the component.

4fill in blank

hard

Fill both blanks to declare a property that can be read publicly but only set privately.

Angular

export class UserComponent {
  [1] _name = 'Alice';

  [2] get name() {
    return this._name;
  }
}

Drag options to blanks, or click blank then click option'

Aprivate

Bpublic

Cprotected

Dreadonly

Attempts:

3 left

💡 Hint

Common Mistakes

Making the field public allows external code to change it.

Making the getter private hides it from outside.

The backing field is private to restrict setting, and the getter is public to allow reading.

5fill in blank

hard

Fill all three blanks to create a component with a protected method, a private property, and a public getter.

Angular

export class ProfileComponent {
  [1] _age = 30;

  [2] get age() {
    return this._age;
  }

  [3] updateAge(newAge: number) {
    this._age = newAge;
  }
}

Drag options to blanks, or click blank then click option'

Aprivate

Bpublic

Cprotected

Dreadonly

Attempts:

3 left

💡 Hint

Common Mistakes

Making the method public exposes it everywhere.

Making the getter private hides it from templates.

Making the property public allows unwanted changes.

The property is private to hide it, the getter is public to allow reading, and the method is protected to allow access in subclasses but not outside.

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