Access modifiers in components in Angular - Step-by-Step Execution

Concept Flow - Access modifiers in components

Component Class Created

↓

Declare Properties with Access Modifiers

↓

Angular Template Tries to Access Properties

↓

Check Access Modifier

↓

Accessible

↓

Render or Error

↓

End

This flow shows how Angular checks access modifiers on component properties when templates try to use them, allowing public properties but blocking private or protected ones.

Execution Sample

Angular

export class MyComponent {
  public title = 'Hello';
  private secret = 'hidden';
}

// Template tries: {{ title }} and {{ secret }}

This code defines a component with a public and a private property; the template can access the public one but not the private.

Execution Table

Step	Action	Property Accessed	Access Modifier	Result	Template Render Outcome
1	Component class created	-	-	-	-
2	Template tries to access 'title'	title	public	Allowed	Displays 'Hello'
3	Template tries to access 'secret'	secret	private	Blocked	Error: Property not accessible
4	Rendering completes	-	-	-	Only 'title' shown, 'secret' hidden

💡 Template cannot access private properties; only public properties render successfully.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
title	'Hello'	'Hello'	'Hello'	'Hello'
secret	'hidden'	'hidden'	'hidden'	'hidden'

Key Moments - 2 Insights

Why can't the template access the 'secret' property?

Because 'secret' is marked private, Angular blocks template access as shown in step 3 of the execution table.

Can protected properties be accessed in the template?

No, protected properties behave like private ones for templates and are not accessible, similar to step 3.

Visual Quiz - 3 Questions

Look at the execution table, what happens when the template tries to access the 'title' property?

A It is blocked silently with no error.

B It causes an error because 'title' is private.

C It is allowed and displays 'Hello'.

D It shows 'hidden' instead.

💡 Hint

Check step 2 in the execution table where 'title' is public and allowed.

At which step does the template access get blocked due to access modifier?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at step 3 where 'secret' is private and access is blocked.

If 'secret' was changed to public, how would the template render outcome change?

A It would display 'hidden' without error.

B It would still be blocked.

C It would cause a runtime error.

D It would be ignored by Angular.

💡 Hint

Public properties are accessible as shown in step 2 for 'title'.

Concept Snapshot

Access modifiers in Angular components:
- public: accessible in template
- private/protected: NOT accessible in template
- Template binding only sees public members
- Use public for data you want to show
- Private hides implementation details
- Angular enforces this at compile time

Full Transcript

In Angular components, properties can have access modifiers: public, private, or protected. The template can only access public properties. When the template tries to use a private or protected property, Angular blocks access and shows an error. This ensures you only expose what you want to the template. For example, a public property 'title' can be shown in the template, but a private property 'secret' cannot. This behavior is checked during rendering, so private or protected properties remain hidden from the template. Remember to mark properties public if you want to bind them in your HTML template.

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