<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning text-dark">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark tag-pills-sm-mb">Dark</span>

<div class="progress mb-2">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 25%"           aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%"         aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>

<div class="alert alert-primary" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-secondary" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-info" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-danger" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-light font-dark" role="alert">This is a dark alert—check it out!</div>
<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>

@for( theme of data; track theme){
    <div class="card">
        <div class="card-header pb-0">
            <h3>{{ theme.mainTitle}}</h3>
            <p class="desc mb-0 mt-1" [innerHTML]="theme.des"></p>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-6">
                    @for( item of theme.item; track item ){
                    <p class="mb-1">{{ item.title}}</p>
                    <div class="alert alert-{{ item.class}}" role="alert">
                        <p class="mb-0">This is a <a class="alert-link {{item.color}}" href="javascript:void(0)">{{item.text}}</a> with an
                            example link.Check it out.</p>
                    </div>
                    }
                </div>
                <div class="col-lg-6">
                    @for( item of theme.item2; track item ){
                    <p class="mb-1">{{ item.title}}</p>
                    <div class="alert alert-{{ item.class}}" role="alert">
                        <p class="mb-0">This is a <a class="alert-link {{item.color}}" href="javascript:void(0)">{{item.text}}</a> with an
                            example link.Check it out.</p>
                    </div>
                    }
                </div>
            </div>
        </div>
    </div>
}

import { Component ,Input } from '@angular/core';
import { alert } from '../../../../shared/data/ui-kits/alert';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-common-top-alerts',
  imports: [CommonModule],
  templateUrl: './common-top-alerts.html',
  styleUrl: './common-top-alerts.scss'
})
export class CommonTopAlerts {

@Input() data:alert[]

}

use code in .ts file

export interface alert {
    mainTitle: string,
    des?: string,
    item: items[];
    item2: items2[];

}
export interface items {
    title: string,
    class: string,
    text: string,
    color?: string
}
export interface items2 {
    title: string,
    color?: string,
    class: string,
    text: string

}

export const darkThemAlert: alert[] = [
    {
        mainTitle: 'Link Color In Dark Theme',
        des: 'Use thedata-bs-title, data-bs-trigger="click" to the content under the HTML tag with click event.',
        item: [
            {
                title: 'Primary Alert',
                class: 'primary dark',
                text: 'primary alert',
                color: 'text-white'
            },
            {
                title: 'Secondary alert',
                class: 'secondary dark',
                text: 'secondary alert',
                color: 'text-white'

            },
            {
                title: 'Tertiary Alert',
                class: 'tertiary dark',
                text: 'Tertiary alert',
                color: 'text-white'

            },
            {
                title: 'Success Alert',
                class: 'success dark',
                text: 'success alert',
                color: 'text-white'

            },
            {
                title: 'Info Alert',
                class: 'info dark',
                text: 'info alert',
                color: 'text-white'
            },
        ],

        item2: [
            {
                title: 'Warning Alert',
                class: 'warning dark',
                text: 'Warning alert',
                color: 'text-white'
            },
            {
                title: 'Danger Alert',
                class: 'danger dark',
                text: 'danger alert',
                color: 'text-white'
            },
            {
                title: 'Light Alert',
                class: 'light dark',
                text: 'light alert',
                color: 'text-dark'
            },

            {
                title: 'Dark Alert',
                class: 'dark dark',
                text: 'dark alert',
                color: 'text-white'
            },

        ]
    },
];

<button class="btn btn-primary example-popover mb-0 me-0" type="button" placement="start"
       popoverTitle="Basic Popover"
      ngbPopover="If the package restore doesn't help, you can look at the Output window in the Visual Studio.">Hurry Up! 
  </button>
    <button class="example-popover btn btn-success mb-0 me-0" type="button"
        triggers="mouseenter:mouseleave"
        placement="bottom" popoverTitle="Hover Popover"
        ngbPopover=" Several utility instruction sets have been featured in the Bootstrap 4 to promote very easy learning for beginners in the business of web building.">Hover tooltip
  </button>    
    <a class="btn btn-lg btn-secondary" placement="right" title="Dismissible popover" popoverTitle="Dismissible popover"
           ngbPopover="You are able to even develop and suggest improvements to the Bootstrap 4 before its final version is delivered.">Dismissible popover
    </a>

<button class="example-popover btn btn-primary mb-0 me-0" type="button" placement="top" ngbTooltip="tootip.">Hover Me</button>

<div class="dropdown-basic">
  <div class="dropdown" ngbDropdown >
    <button type="button" class="dropbtn btn-primary" ngbDropdownToggle >Dropdown Button <span><i class="icofont icofont-arrow-down"></i></span></button>
    <div class="dropdown-content" ngbDropdownMenu >
      <a href="#" ngbDropdownItem >Project</a>
      <a href="#" ngbDropdownItem >Ecommerce</a>
      <a href="#" ngbDropdownItem >Crypto</a>
    </div>
  </div>
</div>

<ul ngbNav #nav="ngbNav" [activeId]="1" class="nav-tabs justify-content-center">
  <li [ngbNavItem]="1">
    <button ngbNavLink>Home</button>
    <ng-template ngbNavContent>
      <p>
      Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
      </p>
    </ng-template>
  </li>
  <li [ngbNavItem]="2">
    <button ngbNavLink>Profile</button>
    <ng-template ngbNavContent>
      <p>
      Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
      </p>
    </ng-template>
  </li>

  <li [ngbNavItem]="3">
    <button ngbNavLink>Contact</button>
    <ng-template ngbNavContent>
      <p>
      Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
      </p>
    </ng-template>
  </li>
</ul>
<div class="tab-content" id="icon-tabContent"> 
    <div [ngbNavOutlet]="nav" class="mt-4"></div>
</div>

<button class="btn btn-secondary px-xl-2 px-xxl-3" type="button" (click)="simpleModal(simpleContent)">Simple</button>
<ng-template #simpleContent let-modal>
    <div class="modal-content">
        <div class="modal-body">
            <div class="modal-toggle-wrapper">
                <h3>Up to <strong class="font-danger">85% OFF</strong>, Hurry Up Online Shopping</h3>
                <div class="modal-img">
                    <img src="assets/images/gif/online-shopping.gif" alt="online-shopping">
                </div>
                <p class="text-sm-center">Our difficulty in finding regular clothes that was of great
                    quality, comfortable, and didn't impact the environment given way to Creatures of Habit.
                </p>
                <button class="btn bg-primary d-flex align-items-center gap-2 text-light ms-auto" type="button"
                    (click)="modal.dismiss('Cross click')">Explore More
                    <svg class="feather">
                        <use href="assets/svg/feather-icons/dist/feather-sprite.svg#arrow-right"></use>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</ng-template>

 import { Component, TemplateRef } from '@angular/core';
 import { NgbModal, NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import { CommonModule } from '@angular/common';

 @Component({
  selector: 'app-simple',,
  imports: [CommonModule,NgbModule],
  templateUrl: './simple.html',
  styleUrl: './simple.scss'
})
 export class Simple {

  constructor(private modalService: NgbModal) { }

  simpleModal(simpleContent: TemplateRef) {
    const modalRef = this.modalService.open(simpleContent);
  }

}