npm i @ng-bootstrap/ng-bootstrap

// typeahead.html
<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>

// typeahead.ts
import { Component } from '@angular/core';
import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { Observable, OperatorFunction } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { FormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';

const states = [
	'Alabama',
	'Alaska',
	'American Samoa',
	'Arizona',
	'Arkansas',
	'California',
	'Colorado',
	'Connecticut',
	'Delaware',
	'District Of Columbia',
	'Federated States Of Micronesia',
	'Florida',
	'Georgia',
	'Guam',
	'Hawaii',
	'Idaho',
	'Illinois',
	'Indiana',
	'Iowa',
	'Kansas',
	'Kentucky',
	'Louisiana',
	'Maine',
	'Marshall Islands',
	'Maryland',
	'Massachusetts',
	'Michigan',
	'Minnesota',
	'Mississippi',
	'Missouri',
	'Montana',
	'Nebraska',
	'Nevada',
	'New Hampshire',
	'New Jersey',
	'New Mexico',
	'New York',
	'North Carolina',
	'North Dakota',
	'Northern Mariana Islands',
	'Ohio',
	'Oklahoma',
	'Oregon',
	'Palau',
	'Pennsylvania',
	'Puerto Rico',
	'Rhode Island',
	'South Carolina',
	'South Dakota',
	'Tennessee',
	'Texas',
	'Utah',
	'Vermont',
	'Virgin Islands',
	'Virginia',
	'Washington',
	'West Virginia',
	'Wisconsin',
	'Wyoming',
];

@Component({
	selector: 'ngbd-typeahead-basic',
	imports: [NgbTypeaheadModule, FormsModule, JsonPipe],
	templateUrl: './typeahead-basic.html',
	styles: `.form-control { width: 300px; }`,
})
export class NgbdTypeaheadBasic {
	model: any;

	search: OperatorFunction = (text$: Observable) =>
		text$.pipe(
			debounceTime(200),
			distinctUntilChanged(),
			map((term) =>
				term.length < 2 ? [] : states.filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10),
			),
		);
}

npm i @ng-bootstrap/ng-bootstrap

 // country.html
<form>
	<div class="mb-3 row">
		<label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Full text 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>
		@if (service.loading$ | async) {
			<span class="col col-form-label">Loading...</span>
		}
	</div>

	<table class="table table-striped">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col" sortable="name" (sort)="onSort($event)">Country</th>
				<th scope="col" sortable="area" (sort)="onSort($event)">Area</th>
				<th scope="col" sortable="population" (sort)="onSort($event)">Population</th>
			</tr>
		</thead>
		<tbody>
			@for (country of countries$ | async; track country.id) {
				<tr>
					<th scope="row">{{ country.id }}</th>
					<td>
						<img
							[src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag"
							[alt]="'The flag of ' + country.name"
							class="me-2"
							style="width: 20px"
						/>
						<ngb-highlight [result]="country.name" [term]="service.searchTerm" />
					</td>
					<td><ngb-highlight [result]="country.area | number" [term]="service.searchTerm" /></td>
					<td><ngb-highlight [result]="country.population | number" [term]="service.searchTerm" /></td>
				</tr>
			} @empty {
				<tr>
					<td colspan="4" style="text-align: center">No countries found</td>
				</tr>
			}
		</tbody>
	</table>

	<div class="d-flex justify-content-between p-2">
		<ngb-pagination [collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
		</ngb-pagination>

		<select class="form-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
			<option [ngValue]="2">2 items per page</option>
			<option [ngValue]="4">4 items per page</option>
			<option [ngValue]="6">6 items per page</option>
		</select>
	</div>
</form>

 // country.ts
import { AsyncPipe, DecimalPipe } from '@angular/common';
import { Component, QueryList, ViewChildren } from '@angular/core';
import { Observable } from 'rxjs';

import { Country } from './country';
import { CountryService } from './country.service';
import { NgbdSortableHeader, SortEvent } from './sortable.directive';
import { FormsModule } from '@angular/forms';
import { NgbHighlight, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
	selector: 'ngbd-table-complete',
	imports: [DecimalPipe, FormsModule, AsyncPipe, NgbHighlight, NgbdSortableHeader, NgbPaginationModule],
	templateUrl: './table-complete.html',
	providers: [CountryService, DecimalPipe],
})
export class NgbdTableComplete {
	countries$: Observable;
	total$: Observable;

	@ViewChildren(NgbdSortableHeader) headers: QueryList;

	constructor(public service: CountryService) {
		this.countries$ = service.countries$;
		this.total$ = service.total$;
	}

	onSort({ column, direction }: SortEvent) {
		// resetting other headers
		this.headers.forEach((header) => {
			if (header.sortable !== column) {
				header.direction = '';
			}
		});

		this.service.sortColumn = column;
		this.service.sortDirection = direction;
	}
}

 // country.service.ts
import { Injectable, PipeTransform } from '@angular/core';

import { BehaviorSubject, Observable, of, Subject } from 'rxjs';

import { Country } from './country';
import { COUNTRIES } from './countries';
import { DecimalPipe } from '@angular/common';
import { debounceTime, delay, switchMap, tap } from 'rxjs/operators';
import { SortColumn, SortDirection } from './sortable.directive';

interface SearchResult {
	countries: Country[];
	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(countries: Country[], column: SortColumn, direction: string): Country[] {
	if (direction === '' || column === '') {
		return countries;
	} else {
		return [...countries].sort((a, b) => {
			const res = compare(a[column], b[column]);
			return direction === 'asc' ? res : -res;
		});
	}
}

function matches(country: Country, term: string, pipe: PipeTransform) {
	return (
		country.name.toLowerCase().includes(term.toLowerCase()) ||
		pipe.transform(country.area).includes(term) ||
		pipe.transform(country.population).includes(term)
	);
}

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

	private _state: State = {
		page: 1,
		pageSize: 4,
		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._countries$.next(result.countries);
				this._total$.next(result.total);
			});

		this._search$.next();
	}

	get countries$() {
		return this._countries$.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 countries = sort(COUNTRIES, sortColumn, sortDirection);

		// 2. filter
		countries = countries.filter((country) => matches(country, searchTerm, this.pipe));
		const total = countries.length;

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

 // country.directive.ts
import { Directive, EventEmitter, Input, Output } from '@angular/core';
import { Country } from './country';

export type SortColumn = keyof Country | '';
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 NgbdSortableHeader {
	@Input() sortable: SortColumn = '';
	@Input() direction: SortDirection = '';
	@Output() sort = new EventEmitter();

	rotate() {
		this.direction = rotate[this.direction];
		this.sort.emit({ column: this.sortable, direction: this.direction });
	}
}

 // country.ts
export interface Country {
  id: number;
  name: string;
  flag: string;
  area: number;
  population: number;
}

npm i ng2-google-charts

// google-chart.html //
<google-chart [data]="areaChart1"></google-chart>

// google-chart.ts //
import { Component } from '@angular/core';
import * as chartData from '../../../../shared/data/charts/google-chart'
import { Ng2GoogleChartsModule } from 'ng2-google-charts';

@Component({
    selector: 'app-area-chart1',
    templateUrl: './area-chart1.html',
    styleUrls: ['./area-chart1.scss'],
    imports: [Ng2GoogleChartsModule]
})
export class AreaChart1 {

  public areaChart1 =  chartData.areaChart1

}


// google-chart-data.ts //

let primary_color = localStorage.getItem('primary_color') || 'var(--theme-default)';
let secondary_color = localStorage.getItem('secondary_color') || 'var(--theme-secondary)';

export var pieChart1 ={
   chartType: 'PieChart',
   dataTable: [
     ['Language', 'Speakers (in millions)'],
         ['Assamese', 13],
         ['Bengali', 83],
         ['Bodo', 1.4],
         ['Dogri', 2.3],
         ['Gujarati', 46],
         ['Hindi', 300],
         ['Kannada', 38],
         ['Kashmiri', 5.5],
         ['Konkani', 5],
         ['Maithili', 20],
         ['Malayalam', 33],
         ['Manipuri', 1.5],
         ['Marathi', 72],
         ['Nepali', 2.9],
         ['Oriya', 33],
         ['Punjabi', 29],
         ['Sanskrit', 0.01],
         ['Santhali', 6.5],
         ['Sindhi', 2.5],
         ['Tamil', 61],
         ['Telugu', 74],
         ['Urdu', 52]
   ],
    
   options: {
     title: 'Indian Language Use',
     legend: 'none',
     width:'100%',
     height: 400,
     pieSliceText: 'label',
     slices: {  4: {offset: 0.2},
       12: {offset: 0.3},
       14: {offset: 0.4},
       15: {offset: 0.5},
     },
       // colors: ["#ab8ce4", "#26c6da"]
       colors: [primary_color, secondary_color, "#222222", "#717171", "#e2c636", "#d22d3d","#e6edef", primary_color, secondary_color, "#222222", "#717171", "#e2c636","#d22d3d", primary_color, secondary_color, "#222222", "#717171", "#e2c636", "#d22d3d", primary_color,secondary_color, "#222222"]
   }
 } 
   

npm i ng2-charts

//chartjs.html//
<canvas baseChart  class="chart" [datasets]="barChart.datasets" [options]="barChart.barOptions"
[data]="barChart"></canvas>

//chartjs.ts//
import { Component, ViewEncapsulation } from '@angular/core';
import { ChartEvent, ChartType } from 'chart.js';
import * as chartData from '../../../shared/data/charts/chartjs'
import { Breadcrumb } from '../../../shared/components/breadcrumb/breadcrumb';
import { BaseChartDirective } from 'ng2-charts';

@Component({
    selector: 'app-chartjs',
    templateUrl: './chartjs.html',
    styleUrls: ['./chartjs.scss'],
    encapsulation: ViewEncapsulation.None,
    imports: [BreadcrumbComponent, BaseChartDirective]
})
export class Chartjs {

  // barChart
  public barChart = chartData.barChart;
   
 }


 // chartjs-data.ts //
 export const barChart = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  responsive: false,
  datasets: [
    {
      label: 'My First dataset',
      borderColor: primaryColor,
      backgroundColor: 'rgba(115, 102 ,255, 0.6)',
      borderWidth: 2,
      data: [35, 59, 80, 81, 56, 55, 40],
    },
    {
      label: 'My Second dataset',
      borderColor: secondaryColor,
      backgroundColor: 'rgb(131,131,131,0.6)',
      borderWidth: 2,
      data: [28, 48, 40, 19, 86, 27, 90],
    },
  ],
  barOptions: [
    {
      scaleBeginAtZero: true,
      scaleShowGridLines: true,
      scaleGridLineColor: 'rgba(0,0,0,0.1)',
      scaleGridLineWidth: 1,
      scaleShowHorizontalLines: true,
      scaleShowVerticalLines: true,
      barShowStroke: true,
      barStrokeWidth: 2,
      barValueSpacing: 5,
      barDatasetSpacing: 1,
    },
  ],
};

// app.config.ts
import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
import { provideToastr } from 'ngx-toastr';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes),
    provideAnimations(),
    provideHttpClient() ,
    provideCharts(withDefaultRegisterables()),
  ]
};

npm i ng-chartist

// chartist.html                                
<x-chartist
   [type]="chart1.type"
   [data]="chart1.data"
   [options]="chart1.options"
   [events]="chart1.events">
</x-chartist> 

// chartist.html
import { Component } from '@angular/core';
import * as chartData from '../../../shared/data/charts/chartist'

@Component({
  selector: 'app-chartist',
  templateUrl: './chartist.html',
  styleUrls: ['./chartist.scss']
})
export class Chartist {

 public chart1 = chartData.chart1;

}

// chartist-data.ts

import * as Chartist from 'chartist';
import { LineChartConfiguration } from 'ng-chartist';

export var configuration: LineChartConfiguration = {
  type: 'Line',
  data: {
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
    series: [
      [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
      [4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
      [5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
      [3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3],
    ],
  },
  options: {
    low: 0,
    showArea: false,
    fullWidth: true,
    height: 250,
  },
};

npm i @bluehalo/ngx-leaflet

// leaflet-map.html
<div class="map-height" leaflet [leafletOptions]="options1"<</div< 

import { Component, } from '@angular/core';
import * as L from 'leaflet';
import { HttpClient } from "@angular/common/http";
import { LeafletModule } from 'npm i @bluehalo/ngx-leaflet';
import { Breadcrumb } from '../../../shared/components/breadcrumb/breadcrumb';

@Component({
    selector: 'app-leaflet-map',
    templateUrl: './leaflet-map.html',
    styleUrls: ['./leaflet-map.scss'],
    imports: [Breadcrumb, LeafletModule]
})

export class LeafletMap {
  
  constructor(private http: HttpClient) {}

  options1 = {
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '...',
      }),
    ],
    zoom: 5,
    center: L.latLng(46.879966, -121.726909),
  };

  layersControl = {
    baseLayers: {
      'Open Street Map': L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        { maxZoom: 18, attribution: '...' }
      ),
      'Open Cycle Map': L.tileLayer(
        'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
        { maxZoom: 18, attribution: '...' }
      ),
    },
    overlays: {
      'Big Circle': L.circle([46.95, -122], { radius: 5000 }),
      'Big Square': L.polygon([
        [46.8, -121.55],
        [46.9, -121.55],
        [46.9, -121.7],
        [46.8, -121.7],
      ]),
    },
  };

}