<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>
<button type="button" class="btn btn-light">Light 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>

@for( theme of data; track theme){
    <div class="card">
        <div class="card-header pb-0">
            <h4>{{ theme.mainTitle}}</h4>
            <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 >Action</a>
      <a href="#" ngbDropdownItem >Another Action</a>
      <a href="#" ngbDropdownItem >Something Else Here</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>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </p>
    </ng-template>
  </li>
  <li ngbDropdown class="nav-item" role="presentation">
    <button type="button" class="nav-link" ngbDropdownToggle>Dropdown</button>
    <div ngbDropdownMenu>
      <button ngbDropdownItem>Action</button>
      <button ngbDropdownItem>Another action</button>
      <button ngbDropdownItem>Something else here</button>
      <div class="dropdown-divider"></div>
      <button ngbDropdownItem>Separated link</button>
    </div>
  </li>
  <li [ngbNavItem]="3">
    <button ngbNavLink>Profile</button>
    <ng-template ngbNavContent>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

      </p>
    </ng-template>
  </li>

  <li [ngbNavItem]="4">
    <button ngbNavLink>Contact</button>
    <ng-template ngbNavContent>
      <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

      </p>
    </ng-template>
  </li>
</ul>