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.