Building an Insurance Application with Angular Components and Bootstrap

Angular is a powerful framework for building client-side applications, and components are the foundation of Angular development. In this article, we will walk through creating a real-time example of an insurance application.

What is a Component in Angular?

A component in Angular is a self-contained, reusable piece of the user interface (UI). It consists of,

• TypeScript Class: Contains the logic for the component.
• Template: Defines the HTML structure of the component.
• Styles: CSS or Bootstrap classes for styling.
• Decorator (@Component): Links the TypeScript class to its template and provides metadata.

In this example, we will create a simple insurance dashboard with a header, policy cards, and a footer.

Step 1. Set Up Your Angular Project.

If you haven’t already set up an Angular project, use the Angular CLI to create one.

ng new insurance-app
cd insurance-app

Step 2. Add Bootstrap to Your Project.

Install Bootstrap using npm

npm install bootstrap

Then, open the angular.json file and add Bootstrap CSS to the styles array.

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

Step 3. Create a Header Component.

Let’s create a HeaderComponent that displays a navigation bar with the title "Insurance Dashboard."

Generate the Component

Use Angular CLI to generate the component.

ng generate component header

Update header.component.html

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">
      <i class="bi bi-shield-check me-2"></i>Insurance Dashboard
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Policies</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Claims</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Update header.component.ts

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

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

Step 4. Create a Policy Card Component.

Let’s create a PolicyCardComponent to display individual insurance policies.

Generate the Component

ng generate component policy-card

Update policy-card.component.ts

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

@Component({
  selector: 'app-policy-card',
  templateUrl: './policy-card.component.html',
  styleUrls: ['./policy-card.component.css']
})
export class PolicyCardComponent {
  @Input() policy: any;
}

Update policy-card.component.html

<div class="card h-100">
  <img 
    src="{{policy.imageUrl}}" 
    class="card-img-top" 
    alt="{{policy.name}}"
    style="height: 200px; object-fit: cover;"
  >
  <div class="card-body">
    <h5 class="card-title">{{policy.name}}</h5>
    <p class="card-text">{{policy.description}}</p>
    <p class="text-primary fw-bold">${{policy.premium.toFixed(2)}}/year</p>
  </div>
  <div class="card-footer bg-white border-top-0">
    <button class="btn btn-primary w-100">
      <i class="bi bi-cart-plus me-2"></i>Purchase Policy
    </button>
  </div>
</div>

Step 5. Update the App Component.

Now, let’s use these components in the main app component.

Updateapp.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  policies = [
    {
      id: 1,
      name: 'Health Insurance',
      description: 'Comprehensive coverage for medical expenses.',
      premium: 1200,
      imageUrl: 'https://via.placeholder.com/300x200?text=Health+Insurance'
    },
    {
      id: 2,
      name: 'Auto Insurance',
      description: 'Protect your vehicle against accidents and theft.',
      premium: 800,
      imageUrl: 'https://via.placeholder.com/300x200?text=Auto+Insurance'
    },
    {
      id: 3,
      name: 'Life Insurance',
      description: 'Secure your family’s future with life coverage.',
      premium: 1500,
      imageUrl: 'https://via.placeholder.com/300x200?text=Life+Insurance'
    }
  ];
}

Update app.component.html

<app-header></app-header>

<div class="container mt-4">
  <h2 class="mb-4">Available Insurance Policies</h2>

  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    <div class="col" *ngFor="let policy of policies">
      <app-policy-card [policy]="policy"></app-policy-card>
    </div>
  </div>
</div>

<footer class="bg-light py-4 mt-5">
  <div class="container text-center">
    <p class="mb-0">&copy; 2025 Insurance Dashboard. All rights reserved.</p>
  </div>
</footer>

Step 6. Run the Application.

Start the Angular development server.

ng serve

Open your browser and navigate to http://localhost:4200. You should see the insurance dashboard with a header, policy cards, and a footer styled with Bootstrap. Below is the more detailed flow of the application.