Creating a Custom Component in Angular with a Real-Time Example

 A Component is the basic building block of an Angular application. It combines HTML (UI), TypeScript (logic), and CSS (styles) into a reusable unit.

Real-Time Scenario

Suppose you are building an Employee Management System.

The application has multiple pages where employee information is displayed:

• Dashboard

• Employee List

• Employee Details

• HR Portal

Instead of writing the same HTML repeatedly, you create a reusable Employee Card Component.

---

Step 1: Create the Component

Using Angular CLI:

ng generate component employee-card

or

ng g c employee-card

Angular creates the following files:

employee-card/
│
├── employee-card.component.ts
├── employee-card.component.html
├── employee-card.component.css
└── employee-card.component.spec.ts

---

Step 2: Employee Card Component

employee-card.component.ts

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

@Component({
  selector: 'app-employee-card',
  templateUrl: './employee-card.component.html',
  styleUrls: ['./employee-card.component.css']
})
export class EmployeeCardComponent {

  @Input() employeeName: string = '';
  @Input() designation: string = '';
  @Input() salary: number = 0;
  @Input() department: string = '';

}

Explanation

• @Component tells Angular this class is a component.

• selector is the HTML tag used to display the component.

• @Input() receives data from the parent component.

---

Step 3: Employee Card HTML

employee-card.component.html

<div class="employee-card">

    <h2>{{employeeName}}</h2>

    <p><strong>Designation:</strong> {{designation}}</p>

    <p><strong>Department:</strong> {{department}}</p>

    <p><strong>Salary:</strong> {{salary | currency:'INR'}}</p>

</div>

---

Step 4: CSS

employee-card.component.css

.employee-card{

    border:1px solid gray;

    padding:20px;

    border-radius:10px;

    width:300px;

    margin:15px;

    box-shadow:0 0 8px lightgray;

}

---

Step 5: Use the Component in App Component

app.component.ts

export class AppComponent {

    employee={

        name:'Mahesh',

        designation:'Senior Software Engineer',

        department:'IT',

        salary:85000

    };

}

---

app.component.html

<app-employee-card

    [employeeName]="employee.name"

    [designation]="employee.designation"

    [department]="employee.department"

    [salary]="employee.salary">

</app-employee-card>

---

Output

----------------------------------------
Mahesh

Designation : Senior Software Engineer

Department  : IT

Salary       : ₹85,000.00
----------------------------------------

---

Data Flow

App Component (Parent)

Employee Object

        │
        ▼

EmployeeCard Component

(@Input Properties)

        │
        ▼

HTML Template

        │
        ▼

Browser Output

---

Real-Time Banking Example

Imagine an Internet Banking application displaying multiple bank accounts.

Parent Component

accounts = [
  {
    accountNo: "1234567890",
    holder: "Ravi Kumar",
    balance: 250000
  },
  {
    accountNo: "9876543210",
    holder: "Priya Sharma",
    balance: 125000
  }
];

Parent HTML

<app-account-card
    *ngFor="let account of accounts"
    [accountNumber]="account.accountNo"
    [accountHolder]="account.holder"
    [balance]="account.balance">
</app-account-card>

Output

-------------------------
Ravi Kumar

Account : 1234567890

Balance : ₹250,000
-------------------------

-------------------------
Priya Sharma

Account : 9876543210

Balance : ₹125,000
-------------------------

The same component is reused for every account, making the UI modular and maintainable.

---

Advantages of Custom Components

• Reusability: Create once, use anywhere.

• Maintainability: Update one component to reflect changes everywhere.

• Separation of Concerns: UI, logic, and styles remain organized.

• Easy Testing: Components can be tested independently.

• Scalability: Essential for large enterprise Angular applications.

---

Interview Questions

1. What is a custom component in Angular?

A custom component is a reusable UI element created by developers using the @Component decorator. It encapsulates HTML, TypeScript, and CSS into a single unit.

2. How do you create a component?

Using the Angular CLI:

ng generate component component-name

or

ng g c component-name

3. How do you pass data from a parent component to a child component?

By using the @Input() decorator.

@Input() employeeName: string = '';

4. How do you display a custom component?

By using its selector in another component's template.

<app-employee-card></app-employee-card>

5. Why are custom components important?

They promote code reuse, improve maintainability, simplify testing, and help organize applications into modular, reusable pieces.