Lesson 3
Creating Your First Component
Introduction

Welcome to the third lesson of the "Front-end Engineering in Angular" course! 🎉 In this lesson, we will dive into one of the most fundamental aspects of Angular development: components. Components are the building blocks of Angular applications, allowing you to create dynamic and reusable pieces of your web application. By the end of this lesson, you'll be able to create a simple Angular component and understand its role within an Angular application.

Understanding Angular Components

Components in Angular are like the individual pieces of a puzzle that come together to form a complete picture. Each component consists of three main parts: a TypeScript class, an HTML template, and CSS styles. The TypeScript class defines the component's behavior and properties, the HTML template determines what the component looks like, and the CSS styles control its appearance.

Components allow you to break down your application into smaller, manageable parts, making it easier to develop, test, and maintain. They also promote reusability, as you can use the same component in different parts of your application.

Exploring the Component Decorator

In Angular, the @Component decorator is used to define a component. This decorator provides metadata about the component, such as its selector, template, styles, and imports. Let's take a closer look at the key properties of the @Component decorator using the default app component as an example:

TypeScript
1import { Component } from '@angular/core';
2import { HelloComponent } from './features/hello/hello.component.ts';
3
4@Component({
5  selector: 'app-root',
6  templateUrl: './app.component.html',
7  styleUrls: ['./app.component.css'],
8  imports: [HelloComponent]
9})
10export class AppComponent {
11  title = 'my-angular-app';
12}
  • selector: This property defines the custom HTML tag that represents the component. In this example, the selector is app-root, which means you can use <app-root></app-root> in your HTML to include this component.
  • templateUrl: This property points to the HTML file that contains the component's template. It defines what the component will render on the screen.
  • styleUrls: This property is an array that points to the CSS files that contain the component's styles.
  • imports: This property is an array that can include other Angular modules or components that the component depends on. It is used to import necessary dependencies for the component, and be able to use them inside this component.

The @Component decorator is essential for telling Angular how to create and display the component.

Creating a Simple Component

Now, let's create a simple component step-by-step using the provided solution code. We'll start by importing the necessary Angular core module and then define our component.

TypeScript
1import { Component } from '@angular/core';
2
3@Component({
4  selector: 'app-hello',
5  templateUrl: './hello.component.html'
6})
7export class HelloComponent {
8  name = 'World';
9}
  1. Import Statement: We begin by importing the Component from @angular/core. This is necessary to use the @Component decorator.
  2. @Component Decorator: We define the component's metadata, including the selector and template URL.
  3. Class Definition: We create a class named HelloComponent. Inside this class, we define a property name with the value 'World'.

This simple component is now ready to be used in your Angular application.

Example: HelloComponent

Let's explore how the HelloComponent works in practice. The component's template uses Angular's interpolation feature to display a greeting message.

HTML, XML
1<h1>Hello, {{ name }}!</h1>

In this example, the {{ name }} syntax is used to bind the name property from the HelloComponent class to the HTML template. When the component is rendered, it will display "Hello, World!" on the screen. This demonstrates the power of Angular components in creating dynamic and interactive web applications.

Conclusion and Next Steps

In this lesson, we explored the concept of Angular components, their structure, and how to create a simple component using the @Component decorator. We also examined the HelloComponent example to see how components can dynamically render content. Additionally, Angular provides a powerful CLI command, ng generate component, which can be used to quickly scaffold new components, streamlining the development process.

As you move forward, you'll have the opportunity to practice creating and modifying components in the exercises that follow. This hands-on experience will reinforce your understanding and help you become more comfortable with Angular development. In the next lesson, we'll build on this knowledge and explore more advanced component features. Keep up the great work! 🚀

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.