Angular Components

# CHAPTER 5

Angular Components #

1. Chapter Introduction #

2. Learning Objectives #

• Generate a component using the Angular CLI.

• Understand the four files that make up a component.

• Understand the @Component decorator and its properties.

• Use a component inside another component (nesting).

• Build a real User Profile component.

3. Generating a Component #

# Full command
ng generate component user-profile

# Shorthand
ng g c user-profile

The CLI will automatically create 4 files inside a new user-profile folder:

• user-profile.component.ts — The TypeScript logic.

• user-profile.component.html — The HTML template.

• user-profile.component.css — The encapsulated styles.

• user-profile.component.spec.ts — The unit test file.

4. The @Component Decorator #

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

@Component({
  selector: 'app-user-profile',    // The HTML tag name to use this component
  templateUrl: './user-profile.component.html', // Link to the HTML file
  styleUrls: ['./user-profile.component.css']   // Link to the CSS file
})
export class UserProfileComponent {
  // TypeScript logic goes here
  name: string = 'Alice Johnson';
  role: string = 'Senior Developer';
  avatarUrl: string = 'assets/avatar.png';
}

5. The Template (HTML) #

<!-- user-profile.component.html -->
<div class="profile-card">
  <img [src]="avatarUrl" alt="User Avatar" />
  <h2>{{ name }}</h2>
  <p>{{ role }}</p>
</div>

6. Using a Component (The selector) #

<!-- app.component.html -->
<h1>Welcome to our Platform</h1>

<!-- Angular renders the entire user-profile component here! -->
<app-user-profile></app-user-profile>

7. Component Architecture Visual #

App Component (app.component.html)
   |
   +---- <app-user-profile>
   |         |
   |         +-- name: "Alice"
   |         +-- role: "Developer"
   |         +-- avatarUrl: "assets/..."
   |
   +---- <app-footer>

8. Standalone Components (Modern Angular) #

ng g c user-profile --standalone

A standalone component includes its own imports array inside the @Component decorator, making it fully self-sufficient.

9. Common Mistakes #

• Forgetting to declare the component: In older Angular (non-standalone), if you manually create a component file without using the CLI, you must manually add it to the declarations array inside app.module.ts. The CLI does this automatically.

• Selector typos: If you write <app-userprofile> in the template instead of <app-user-profile>, Angular will render nothing and throw a warning.

10. Best Practices #

• One component, one responsibility: A UserProfile component should only show user data. It should not fetch data from an API. Data fetching belongs in Services (Chapter 9).

• Smart vs Dumb Components: "Dumb" components receive data as inputs and only display it. "Smart" components fetch and manage state. Keep most components "dumb".

11. Mini Project: User Profile Component #

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

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent {
  name: string = 'Alice Johnson';
  role: string = 'Senior Angular Developer';
  followers: number = 1240;
  following: number = 382;
  bio: string = 'Passionate about building scalable Angular applications.';
}

<!-- user-profile.component.html -->
<div class="card">
  <div class="avatar">AJ</div>
  <h2>{{ name }}</h2>
  <span class="badge">{{ role }}</span>
  <p>{{ bio }}</p>
  <div class="stats">
    <div><strong>{{ followers }}</strong> Followers</div>
    <div><strong>{{ following }}</strong> Following</div>
  </div>
</div>

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the purpose of each of the four files generated when you create an Angular component with the CLI.

• Q: What is the difference between templateUrl and template in the @Component decorator?

14. Summary #

15. Next Chapter Recommendation #