Angular Components: Templates, Metadata, and Examples

In the previous lesson, we set up the Angular development environment, which is the first step to building web apps. We installed Node.js, Angular CLI, and created our first Angular project. Now, it’s time to dive deeper into Angular fundamentals by understanding components, which are the building blocks of any Angular app.

Building a User Profile Component

I recently worked on a project where I needed to create a user profile section for a web app. The profile had to display user details like name, email, and profile picture. To achieve this, I created an Angular component called UserProfileComponent. This component had a template to show the user data and styles to make it visually appealing. By the end of this tutorial, you’ll be able to create similar components for your own projects.

Understanding Angular Components

An Angular component is a TypeScript class that controls a part of the UI. It has three main parts:

Class: Contains the logic and data for the component.

Template: Defines the HTML structure of the component.

Metadata: Tells Angular how to process the class.

For example, the UserProfileComponent class had properties like userName and userEmail, which were displayed in the template.

Creating a Component

To create a component, use the Angular CLI command:

ng generate component UserProfile  

This command creates four files:

• user-profile.component.ts: The TypeScript class.

• user-profile.component.html: The template file.

• user-profile.component.css: The styles file.

• user-profile.component.spec.ts: The test file.

Here’s an example of the user-profile.component.ts file:

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

@Component({  
  selector: 'app-user-profile',  
  templateUrl: './user-profile.component.html',  
  styleUrls: ['./user-profile.component.css']  
})  
export class UserProfileComponent {  
  userName = 'John Doe';  
  userEmail = '[email protected]';  
}  

Writing the Template

The template file (user-profile.component.html) defines how the component looks. For the UserProfileComponent, I used this template:

<div class="profile">  
  <h2>{{ userName }}</h2>  
  <p>{{ userEmail }}</p>  
  <img src="assets/profile-pic.jpg" alt="Profile Picture">  
</div>  

This template displays the user’s name, email, and profile picture.

Adding Styles

The styles file (user-profile.component.css) makes the component visually appealing. Here’s an example:

.profile {  
  text-align: center;  
  padding: 20px;  
  border: 1px solid #ccc;  
  border-radius: 10px;  
}  

.profile img {  
  width: 100px;  
  height: 100px;  
  border-radius: 50%;  
}

These styles center the content, add padding, and round the profile picture.

Using the Component

To use the UserProfileComponent, add its selector (app-user-profile) to another template. For example, in app.component.html:

<app-user-profile></app-user-profile>  

This renders the user profile on the page.

Conclusion

In this tutorial, we learned how to create an Angular component, write its template, and add styles. We also saw how to use the component in another template. Components are the heart of Angular apps, and mastering them is key to building dynamic web apps.

In the next lesson, we’ll explore Angular modules and architecture, which help organize and scale your app. If you missed the previous lesson on setting up the development environment, check it out to ensure you’re ready for the next steps.