Creating a Standalone Component in Angular: A Best Guide With Easy Example

Creating a Standalone Component in Angular is a powerful technique that promotes reusability, maintainability, and modularity in your applications. By isolating functionality into self-contained units, standalone components allow you to easily manage and update individual parts of your application without affecting others. This approach not only simplifies the structure of your code but also enhances its testability and scalability. By following the steps outlined in this blog, you can create your own standalone components and leverage their benefits. Practice by building different components for various functionalities in your applications, and you'll quickly see how they can streamline your development process.

What is a Standalone Component?

In Angular, a standalone component is an autonomous unit that doesn't need to be a part of a bigger module in order to be utilized. This indicates that a standalone component may operate independently of other modules or components. When you need to design a reusable user interface component that can be utilized in several areas of your program, standalone components come in handy.

Benefits of Standalone Components

• Reusability: Code duplication and development time may be decreased by reusing standalone components across various application components.
• Maintainability: It is simpler to administer and change some sections of the program without impacting others because each component is self-contained.
• Modularity: Standalone components provide a modular design that makes the application's structure clearer and easier to grasp.
• Testability: Because self-contained components have well defined inputs and outputs, testing them is simpler.
• Separation of Concerns: You may make the code clearer and more structured by separating the functionality into distinct components, which guarantees that each component has a single task.

Use Cases for Standalone Components

1. Reusable User Interface Elements: You may create reusable user interface elements like buttons, forms, and navigation bars by using standalone components.
2. configurable Components: You can make easily integrated, readily configurable components using standalone components that you may include into other areas of your program.
3. Third-Party Integration: You may incorporate third-party libraries or services into your application by using standalone components.

Creating a Standalone Component

The procedures below must be followed in order to construct a standalone component in Angular:

• Make a New Element: Use the command ng generate component to create a new component.
• Explain the Part: By including the required TypeScript, HTML, and CSS code, you can define the component.
• Turn the Part Into a Stand Alone: By including the standalone attribute in the component's metadata, you may make it standalone.

Step 1: Setting Up Your Angular Project

First, ensure you have Angular CLI installed. If not, you can install it using npm:

npm install -g @angular/cli        

Create a new Angular project:

ng new my-angular-app
cd my-angular-app        

Step 2: Generate a New Component

Use the Angular CLI to generate a new component. For instance, we will create a user-profile component:

ng generate component user-profile        

This command will create four files:

• user-profile.component.ts
• user-profile.component.html
• user-profile.component.css
• user-profile.component.spec.ts

Step 3: Define the Component Logic

Open user-profile.component.ts and define the component's logic. Here’s a simple example:

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

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent {
  @Input() name: string = '';
  @Input() age: number = 0;
}        

In this example, we have two input properties: name and age.

Step 4: Create the Component Template

Next, define the component's template in user-profile.component.html:

<div class="user-profile">
  <h2>{{ name }}</h2>
  <p>Age: {{ age }}</p>
</div>        

This template displays the user's name and age.

Step 5: Style the Component

Add some basic styles in user-profile.component.css:

.user-profile {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  width: 200px;
}        

Step 6: Use the Component in Another Part of Your Application

To use the user-profile component, open app.component.html and add the following code:

<app-user-profile [name]="'John Doe'" [age]="30"></app-user-profile>        

This will render the user-profile component with the name "John Doe" and age 30.

Example: A More Advanced Standalone Component

Let’s create a more advanced standalone component that displays a list of users. We will add some additional functionality like filtering the list by name.

Step 1: Generate the Component

Generate a new component named user-list:

ng generate component user-list        

Step 2: Define the Component Logic

Open user-list.component.ts and define the component's logic:

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

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent {
  users = [
    { name: 'John Doe', age: 30 },
    { name: 'Jane Smith', age: 25 },
    { name: 'Bob Johnson', age: 45 }
  ];
  searchTerm: string = '';

  filterUsers() {
    return this.users.filter(user => user.name.toLowerCase().includes(this.searchTerm.toLowerCase()));
  }
}        

Step 3: Create the Component Template

Next, define the component's template in user-list.component.html:

<div class="user-list">
  <input type="text" [(ngModel)]="searchTerm" placeholder="Search by name">
  <div *ngFor="let user of filterUsers()">
    <app-user-profile [name]="user.name" [age]="user.age"></app-user-profile>
  </div>
</div>        

This template includes a search input field and a list of user-profile components filtered by the search term.

Step 4: Style the Component

Add some basic styles in user-list.component.css:

.user-list {
  max-width: 400px;
  margin: 0 auto;
}

.user-list input {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}        

Step 5: Use the Component in Another Part of Your Application

To use the user-list component, open app.component.html and add the following code:

<app-user-list></app-user-list>        

Exercise: Making Your Own Independent Part

Try developing an own standalone component to help you comprehend it better. This is a quick practice task:

• Assignment: Make a "Product Card" Part
• Create a brand-new element called product-card.
• Establish the productName, productPrice, and productDescription input attributes.
• To display the product details, create a template.
• To improve the product card's visual attractiveness, add styles.
• To show a product, use the product-card component in another area of your application.

Step-by-Step Solution

Step 1: Generate the Component

ng generate component product-card        

Step 2: Define the Component Logic

Open product-card.component.ts and define the component's logic:

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

@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html',
  styleUrls: ['./product-card.component.css']
})
export class ProductCardComponent {
  @Input() productName: string = '';
  @Input() productPrice: number = 0;
  @Input() productDescription: string = '';
}        

Step 3: Create the Component Template

Next, define the component's template in product-card.component.html:

<div class="product-card">
  <h3>{{ productName }}</h3>
  <p>Price: ${{ productPrice }}</p>
  <p>{{ productDescription }}</p>
</div>        

Step 4: Style the Component

Add some basic styles in product-card.component.css:

.product-card {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  width: 250px;
  margin-bottom: 10px;
}        

Step 5: Use the Component

To use the product-card component, open app.component.html and add the following code:

<app-product-card 
  [productName]="'Laptop'" 
  [productPrice]="999.99" 
  [productDescription]="'A high-performance laptop for all your needs.'">
</app-product-card>        

This will render the product-card component with the product details you provided.

Using Angular to create standalone components is an effective way to encourage modularity, reusability, and maintainability in your apps. You may design and profit fully from your own independent components by following the instructions provided in this blog. Once you practice making distinct components for different functionality in your apps, you'll quickly notice how they may make the development process go more smoothly.

We have looked at how to build an Angular standalone component in this blog. The advantages of independent components, their applications, and their creation and utilization have all been demonstrated. Additionally, we have included a sample on how to create a basic independent component that shows a list of objects. These techniques will help you design components that are both reusable and adaptable so they may be utilized in different areas of your application.

Other : How To Communicate With HttpClient And Http Methods In Angular With Best Examples