Angular project structure walkthrough - Mini Project: Build & Apply

Angular Project Structure Walkthrough

📖 Scenario: You are starting a new Angular project to build a simple user profile display. Understanding the project structure will help you organize your code and files properly.

🎯 Goal: Learn the basic Angular project structure by creating a standalone component, adding a signal for user data, and displaying the user name in the template.

📋 What You'll Learn

Create a standalone Angular component named UserProfile

Define a signal called userName with the value 'Alice'

Use the @Component decorator with standalone: true

Display the userName signal value in the component template

💡 Why This Matters

🌍 Real World

Angular components are the building blocks of modern web apps. Understanding their structure helps you build clean, maintainable user interfaces.

💼 Career

Knowing how to create standalone components and use signals is essential for Angular developers working on reactive and scalable applications.

1

Create the UserProfile component skeleton

Create a standalone Angular component named UserProfile with the @Component decorator. Include standalone: true and an empty template string template: ''.

Angular

@Component({
  standalone: true,
  template: ''
})
export class UserProfile {
  // Your code here
}

Need a hint?

Use @Component from @angular/core and set standalone: true in the decorator.

2

Add a signal for userName

Inside the UserProfile class, create a signal called userName using Angular's signal function. Initialize it with the string 'Alice'. Import signal from @angular/core.

Angular

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

@Component({
  standalone: true,
  template: ''
})
export class UserProfile {
  // Your code here
}

Need a hint?

Use userName = signal('Alice') inside the class to create the signal.

3

Display the userName in the template

Update the template property in the @Component decorator to display the userName signal value using Angular's interpolation syntax {{ userName() }}.

Angular

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

@Component({
  standalone: true,
  template: ``
})
export class UserProfile {
  userName = signal('Alice');
}

Need a hint?

Use backticks ` for the template string and include {{ userName() }} inside a paragraph tag.

4

Complete the component with necessary imports

Ensure the component imports Component and signal from @angular/core. The component should be fully standalone and ready to use in an Angular app.

Angular

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

@Component({
  standalone: true,
  template: `User Name: {{ userName() }}`
})
export class UserProfile {
  userName = signal('Alice');
  // Your code here if needed
}

Need a hint?

Check that all imports and component properties are present and correct.