npm i @ng-bootstrap/ng-bootstrap

A typeahead example that gets values from a static <code>string[]</code>
<ul>
  <li><code>debounceTime</code> operator</li>
  <li>kicks in only if 2+ characters typed</li>
  <li>limits to 10 results</li>
</ul>

<label for="typeahead-basic">Search for a state:</label>
<input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" />
<hr />
<pre>Model: {{ model | json }}</pre>

  import { CommonModule } from '@angular/common';
  import { Component, viewChild } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  
  import { NgbTypeahead, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
  import { Observable, OperatorFunction, debounceTime, distinctUntilChanged, map } from 'rxjs';
  
  import { FormattedResults } from './formatted-results/formatted-results';
  import { GlobalConfigurationOfTypeaheads } from './global-configuration-of-typeaheads/global-configuration-of-typeaheads';
  import { OpenOnFocus } from './open-on-focus/open-on-focus';
  import { PreventManualEntry } from './prevent-manual-entry/prevent-manual-entry';
  import { SelectOnExact } from './select-on-exact/select-on-exact';
  import { TemplateForResult } from './template-for-result/template-for-result';
  import { WikipediaSearch } from './wikipedia-search/wikipedia-search';
  import * as data from '../../../../shared/data/data/forms/form-widgets';
  
  @Component({
    selector: 'app-typeaherd',
    imports: [
      NgbTypeaheadModule,
      FormattedResults,
      GlobalConfigurationOfTypeaheads,
      OpenOnFocus,
      PreventManualEntry,
      SelectOnExact,
      TemplateForResult,
      WikipediaSearch,
      CommonModule,
      FormsModule,
    ],
    templateUrl: './typeaherd.html',
    styleUrls: ['./typeaherd.scss'],
  })
  export class Typeaherd {
    public model: string;
    public states = data.states;
  
    readonly instance = viewChild('instance');
  
    search: OperatorFunction = (text$: Observable) =>
      text$.pipe(
        debounceTime(200),
        distinctUntilChanged(),
        map(term =>
          term.length < 2
            ? []
            : this.states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10),
        ),
      );
  }
  

npm i @ng-bootstrap/ng-bootstrap

 
                                  
// data.ts
import { Country } from './country';

export const tableData: Table[] = [
  {
    id: 1,
    name: 'Tiger Nixon',
    position: 'System Architect',
    office: 'Edinburgh',
    age: '61',
    startDate: '2011/04/25',
    salary: '$320,800',
  },
  {
    id: 2,
    name: 'Garrett Winters',
    position: 'Accountant',
    office: 'Tokyo',
    age: '63',
    startDate: '2011/07/25',
    salary: '$170,750',

  },
  {
    id: 3,
    name: 'Ashton Cox',
    position: 'Junior Technical Author',
    office: 'San Francisco',
    age: '66',
    startDate: '2009/01/12',
    salary: '$86,000',

  },
  {
    id: 4,
    name: 'Cedric Kelly',
    position: 'Senior Javascript Developer',
    office: 'Edinburgh',
    age: '22',
    startDate: '2012/03/29',
    salary: '$433,060',

  },
  {
    id: 5,
    name: 'Airi Satou',
    position: 'Accountant',
    office: 'Tokyo ',
    age: '33',
    startDate: '2008/11/28',
    salary: '$162,700',

  },
  {
    id: 6,
    name: 'Brielle Williamson',
    position: 'Integration Specialist',
    office: 'New York ',
    age: '61',
    startDate: '2012/12/02',
    salary: '$372,000',

  },
  {
    id: 7,
    name: 'Herrod Chandler',
    position: 'Sales Assistant',
    office: 'San Francisco',
    age: '59',
    startDate: '2012/08/06',
    salary: '$137,500',

  },
  {
    id: 8,
    name: 'Rhona Davidson',
    position: 'Integration Specialist',
    office: 'Tokyo',
    age: '55',
    startDate: '2010/10/14',
    salary: '$327,900',

  }, 
  {
    id: 9,
    name: 'Colleen Hurst',
    position: 'Javascript Developer',
    office: 'San Francisco',
    age: '39',
    startDate: '2009/09/15',
    salary: '$205,500',

  },
  {
    id: 10,
    name: 'Sonya Frost',
    position: 'Software Engineer',
    office: 'Edinburgh',
    age: '23',
    startDate: '2008/12/13',
    salary: '$103,600',

  },
  {
    id: 11,
    name: 'Jena Gaines',
    position: 'Office Manager',
    office: 'London',
    age: '30',
    startDate: '2008/12/19',
    salary: '$90,560',

  },
  {
    id: 12,
    name: 'Quinn Flynn',
    position: 'Support Lead',
    office: 'Edinburgh',
    age: '22',
    startDate: '2013/03/03',
    salary: '$342,000',

  },
  {
    id: 13,
    name: 'Charde Marshall',
    position: 'Regional Director',
    office: 'San Francisco',
    age: '36',
    startDate: '2008/10/16',
    salary: '$470,600',

  },
  {
    id: 14,
    name: 'Donna Snider',
    position: 'Customer Support',
    office: 'New York',
    age: '27',
    startDate: '2011/01/25',
    salary: '$112,000',
  },
];
                                

                                  

// service.ts

import { DecimalPipe } from '@angular/common';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subject, debounceTime, delay, of, switchMap, tap } from 'rxjs';
import { tableData } from '../data/data/tables/datatable';
import { SortColumn, SortDirection } from '../directive/sort-datatable.directive';
import { Table } from '../interface/datatable';

interface SearchResult {
  basicTable: Table[];
  total: number;
}

interface State {
  page: number;
  pageSize: number;
  searchTerm: string;
  sortColumn: SortColumn;
  sortDirection: SortDirection;
}

const compare = (v1: string | number, v2: string | number) => v1 < v2 ? -1 : v1 > v2 ? 1 : 0;

function sort(basicTable: Table[], column: SortColumn, direction: string): Table[] {
  if (direction === '' || column === '') {
    return basicTable;
  } else {
    return [...basicTable].sort((a: any, b: any) => {
      const res = compare(a[column], b[column]);
      return direction === 'asc' ? res : -res;
    });
  }
}


@Injectable({
  providedIn: 'root'
})
export class TablesService {
  private _loading$ = new BehaviorSubject(true);
  private _search$ = new Subject();
  private _tables$ = new BehaviorSubject([]);
  private _total$ = new BehaviorSubject(0);

  private _state: State = {
    page: 1,
    pageSize: 10,
    searchTerm: '',
    sortColumn: '',
    sortDirection: ''
  };

  constructor(private pipe: DecimalPipe) {
    this._search$
      .pipe(
        tap(() => this._loading$.next(true)),
        debounceTime(200),
        switchMap(() => this._search()),
        delay(200),
        tap(() => this._loading$.next(false))
      )
      .subscribe(result => {
        this._tables$.next(result.basicTable);
        this._total$.next(result.total);
      });
    this._search$.next();
    console
  }

  get basicTable$() { return this._tables$.asObservable(); }
  get total$() { return this._total$.asObservable(); }
  get loading$() { return this._loading$.asObservable(); }
  get page() { return this._state.page; }
  get pageSize() { return this._state.pageSize; }
  get searchTerm() { return this._state.searchTerm; }

  set page(page: number) { this._set({ page }); }
  set pageSize(pageSize: number) { this._set({ pageSize }); }
  set searchTerm(searchTerm: string) { this._set({ searchTerm }); }
  set sortColumn(sortColumn: SortColumn) { this._set({ sortColumn }); }
  set sortDirection(sortDirection: SortDirection) { this._set({ sortDirection }); }

  private _set(patch: Partial) {
    Object.assign(this._state, patch);
    this._search$.next();
  }

  private _search(): Observable {
    const { sortColumn, sortDirection, pageSize, page, searchTerm } = this._state;


    // 1. sort
    let basicTable = sort(tableData, sortColumn, sortDirection);

    // 2. filter


    const total = basicTable.length;

    // 3. paginate
    basicTable = basicTable.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({ basicTable, total });
  }
}
                                     
                                  

//interface.ts
export interface Table {
  id: number;
  name: string;
  position: string;
  office: string;
  startDate: string;
  salary: string;
  age: string;
}
                                  
                                  

 // table-complete.html

 <div class="table-responsive">
            <div class="dataTables_wrapper no-footer">
              <form>
                <div class="mb-3 row justify-content-end">
                  <span class="col col-form-label text-end" *ngIf="service.loading$ | async">Loading...</span>
                  <label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Search:</label>
                  <div class="col-xs-3 col-sm-auto">
                    <input id="table-complete-search" type="text" class="form-control" name="searchTerm"
                      [(ngModel)]="service.searchTerm">
                  </div>
                </div>
                <table class="display dataTable no-footer">
                  <thead>
                    <tr>
                      <th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
                      <th scope="col" sortable="position" (sort)="onSort($event)">position</th>
                      <th scope="col" sortable="office" (sort)="onSort($event)">Office</th>
                      <th scope="col" sortable="age" (sort)="onSort($event)">Age</th>
                      <th scope="col" sortable="startDate" (sort)="onSort($event)">Start Date</th>
                      <th scope="col" sortable="salary" (sort)="onSort($event)">Salary</th>
                      <th scope="col">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let item of basicTable$ | async">
                      <td scope="row">
                        <ngb-highlight [result]="item.name" [term]="service.searchTerm"></ngb-highlight>
                      </td>
                      <td>
                        <ngb-highlight [result]="item.position" [term]="service.searchTerm"></ngb-highlight>
                      </td>
                      <td>
                        <ngb-highlight [result]="item.office" [term]="service.searchTerm"></ngb-highlight>
                      </td>
                      <td>
                        <ngb-highlight [result]="item.age" [term]="service.searchTerm"></ngb-highlight>
                      </td>
                      <td>
                        <ngb-highlight [result]="item.startDate" [term]="service.searchTerm"></ngb-highlight>
                      </td>
                      <td>
                        <ngb-highlight [result]="item.salary" [term]="service.searchTerm"></ngb-highlight>
                      </td>
                      <td> 
                        <ul class="action"> 
                          <li class="edit"> <i class="icon-pencil-alt"></i></li>
                          <li class="delete" (click)="deleteData(item.id)"><i class="icon-trash"></i></li>
                        </ul>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <div class="d-flex justify-content-between mt-3">
                  <select class="form-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
                    <option [ngValue]="10">10 items per page</option>
                    <option [ngValue]="25">25 items per page</option>
                    <option [ngValue]="50">50 items per page</option>
                    <option [ngValue]="100">100 items per page</option>
                  </select>
                  <ngb-pagination class="ms-3" [collectionSize]="(total$ | async)!" [(page)]="service.page"
                    [pageSize]="service.pageSize">
                  </ngb-pagination>
                </div>
              </form>
            </div>
          </div>

// table-complete.ts
import { CommonModule, DecimalPipe } from '@angular/common';
import { Component, inject, viewChildren } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { NgbPaginationModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { Observable } from 'rxjs';

import {
  SortDatatableDirective,
  SortEvent,
} from '../../../shared/directive/sort-datatable.directive';
import { Table } from '../../../shared/interface/datatable';
import { TablesService } from '../../../shared/services/tables.service';

@Component({
  selector: 'app-data-tables',
  templateUrl: './data-tables.html',
  styleUrls: ['./data-tables.scss'],
  providers: [TablesService, DecimalPipe],
  imports: [
    FormsModule,
    SortDatatableDirective,
    NgbPaginationModule,
    CommonModule,
    FormsModule,
    NgbTypeaheadModule,
  ],
})
export class DataTables {
  public basicTable$: Observable;
  public total$: Observable;
  public service = inject(TablesService);
  readonly headers = viewChildren(SortDatatableDirective);

  constructor() {
    this.basicTable$ = this.service.basicTable$;
    this.total$ = this.service.total$;
  }

  onSort({ column, direction }: SortEvent) {
    this.headers().forEach(header => {
      if (header.sortable() !== column) {
        header.currentDirection.set('');
      }
    });
    this.service.sortColumn = column;
    this.service.sortDirection = direction;
  }

  deleteData(id: number) {
    this.basicTable$.subscribe((data: Table[]) => {
      data.map((elem: Table, i: number) => {
        elem.id == id && data.splice(i, 1);
      });
    });
  }
}

       
    

        
  
   // sortable.directive.ts

   import { Directive, HostBinding, HostListener, input, output, signal } from '@angular/core';

   import { Table } from '../interface/datatable';
   
   export type SortColumn = keyof Table | '';
   export type SortDirection = 'asc' | 'desc' | '';
   const rotate: { [key: string]: SortDirection } = { asc: 'desc', desc: '', '': 'asc' };
   
   export interface SortEvent {
     column: SortColumn;
     direction: SortDirection;
   }
   
   @Directive({
     selector: '[th[sortable]]',
     host: {
       '[class.asc]': 'direction === "asc"',
       '[class.desc]': 'direction === "desc"',
       '(click)': 'rotate()',
     },
   })
   export class SortDatatableDirective {
     readonly direction = input('');
     readonly sortable = input('');
     public currentDirection = signal(this.direction());
   
     readonly sort = output();
   
     @HostBinding('class.asc')
     get isAsc() {
       return this.currentDirection() === 'asc';
     }
   
     @HostBinding('class.desc')
     get isDesc() {
       return this.currentDirection() === 'desc';
     }
     @HostListener('click')
     rotateColumn() {
       this.currentDirection.set(rotate[this.currentDirection()]);
       this.sort.emit({ column: this.sortable(), direction: this.currentDirection() });
     }
   }