Creating and Using Components in Angular

Introduction

Angular is a powerful front-end framework that allows developers to build dynamic and interactive web applications. One of the fundamental building blocks of an Angular application is components. Components are the building blocks of the user interface, and they encapsulate the logic and the template for a specific part of the UI.

In this blog, we will explore how to create and use components in Angular with practical examples.

If you want to learn more about the Principles and Concepts of Functional Programming, please refer here.

Step 1: Set Up Your Angular Environment

Before we dive into creating components, ensure that you have set up your Angular environment as explained in our previous blog titled “Setting Up Your Angular Environment.” Once you have Angular CLI installed, you can proceed with creating your Angular components.

Step 2: Create a New Angular Component

Angular CLI provides a convenient command to generate a new component. Open your terminal (or command prompt) and navigate to your Angular project directory.

To generate a new component, use the following command:

ng generate component <component-name>

Replace <component-name> with the desired name for your component, using kebab-case (lowercase with hyphens) format.

For example, to create a component named “product-list,” use the following command:

ng generate component product-list

Angular CLI will generate the necessary files for your component, including a TypeScript file (product-list.component.ts), an HTML template file (product-list.component.html), a CSS or SCSS file (product-list.component.css or product-list.component.scss), and a test file (product-list.component.spec.ts) for unit testing.

Step 3: Customize Your Component

Open the generated product-list.component.ts file to customize your component logic.

The component TypeScript file should look like this:

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

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css'],
})
export class ProductListComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

You can add properties, methods, and other logic to the component class.

For example, let’s add a products array to our component:

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

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css'],
})
export class ProductListComponent implements OnInit {
  products: string[] = ['Product 1', 'Product 2', 'Product 3'];

  constructor() {}

  ngOnInit(): void {}
}

Step 4: Customize Your Component Template

Next, open the product-list.component.html file to customize the template for your component.

In this example, we will display the products in a simple list:

<h2>Product List</h2>
<ul>
  <li *ngFor="let product of products">{{ product }}</li>
</ul>

Step 5: Use Your Component in Another Component

Now that you have created and customized your component, you can use it in another component or template.

Let’s say you want to use the ProductListComponent in the AppComponent.

Open the app.component.html file and add the following code:

<h1>Welcome to My Online Store!</h1>
<app-product-list></app-product-list>

The <app-product-list></app-product-list> is a custom element representing your ProductListComponent. Angular recognizes this as a component selector and renders your ProductListComponent within the AppComponent.

Step 6: Serve Your Application

With your component integrated into the AppComponent, you can now serve your application and see the result. In the terminal, run the following command:

ng serve

After the server is up and running, open your web browser and navigate to http://localhost:4200/. You should see the welcome message and the list of products displayed by the ProductListComponent.

Conclusion

Congratulations! You have successfully created and used components in your Angular application. Components are essential building blocks that enable developers to create reusable and modular user interfaces. By following the steps outlined in this blog, you can create custom components, customize their logic and templates, and integrate them into other components to build complex and dynamic web applications.

Angular’s component-based architecture enhances code organization, maintainability, and reusability, making it an excellent choice for modern web development. Experiment with different components, explore Angular’s powerful features, and continue building remarkable web applications with Angular! Happy coding!

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.