Access modifiers in components in Angular - Mini Project: Build & Apply

Access modifiers in components

📖 Scenario: You are building a simple Angular component to display user information. You want to control which properties and methods can be accessed from outside the component and which should stay private inside it.

🎯 Goal: Create an Angular standalone component named UserInfoComponent that uses public and private access modifiers correctly to manage its properties and methods.

📋 What You'll Learn

Create a standalone Angular component named UserInfoComponent.

Add a public property called userName with the value 'Alice'.

Add a private property called userAge with the value 30.

Add a public method called getUserAge that returns the value of userAge.

Use the userName property in the component template to display the user's name.

Do not display userAge directly in the template.

💡 Why This Matters

🌍 Real World

In real Angular apps, access modifiers help developers protect sensitive data and control what parts of a component are exposed to templates or other components.

💼 Career

Understanding access modifiers is essential for writing clean, maintainable Angular code and collaborating in teams where component encapsulation matters.

1

Create the component with public userName

Create a standalone Angular component named UserInfoComponent. Inside the component class, add a public property called userName and set it to 'Alice'.

Angular

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

@Component({
  selector: 'app-user-info',
  standalone: true,
  template: `User: {{ userName }}`
})
export class UserInfoComponent {
  // Your code here
}

Need a hint?

Use public userName = 'Alice'; inside the component class.

2

Add a private userAge property

Inside the UserInfoComponent class, add a private property called userAge and set it to 30.

Angular

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

@Component({
  selector: 'app-user-info',
  standalone: true,
  template: `User: {{ userName }}`
})
export class UserInfoComponent {
  public userName = 'Alice';
  // Your code here
}

Need a hint?

Use private userAge = 30; inside the component class.

3

Add a public method to get userAge

Inside the UserInfoComponent class, add a public method called getUserAge that returns the value of the private userAge property.

Angular

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

@Component({
  selector: 'app-user-info',
  standalone: true,
  template: `User: {{ userName }}`
})
export class UserInfoComponent {
  public userName = 'Alice';
  private userAge = 30;
  // Your code here
}

Need a hint?

Define public getUserAge(): number { return this.userAge; } inside the component class.

4

Complete the component template

Ensure the component template uses the userName property to display the user's name inside a paragraph tag. Do not display userAge directly in the template.

Angular

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

@Component({
  selector: 'app-user-info',
  standalone: true,
  template: `User: {{ userName }}`
})
export class UserInfoComponent {
  public userName = 'Alice';
  private userAge = 30;

  public getUserAge(): number {
    return this.userAge;
  }
  // Your code here
}

Need a hint?

The template should only show {{ userName }} inside a paragraph tag.