Javascript 如何在Angular 8/9中执行全局搜索？
请找到我现有的脚本 目录结构：Javascript 如何在Angular 8/9中执行全局搜索？,javascript,angular,typescript,Javascript,Angular,Typescript,请找到我现有的脚本 目录结构： App/ ->Classes ->Components ->Services Index.html 脚本示例： Index.html <html lang="en"> <head> </head> <body> <app-root></app-root> </body>
App/
->Classes
->Components
->Services Index.html
<html lang="en">
<head>
</head>
<body>
<app-root></app-root>
</body>
</html>
<div class="page-wrapper">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
import { Component, EventEmitter, Output, Input, OnInit } from '@angular/core';
import { Params, Router, ActivatedRoute } from '@angular/router';
import {switchMap} from 'rxjs/operators';
import { Options, ChangeContext, PointerType, LabelType } from 'ng5-slider';
import { ProductService } from './../../services/product.service';
import { CategoryService } from './../../services/category.service';
import { NgxSpinnerService } from 'ngx-spinner';
declare var jQuery: any;
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
filterOptions:any = {};
products: any;
notEmptyPost = true;
notscrolly = true;
isCatLoaded = false;
dataLength: any;
catname: any;
error: {};
config: any;
brandArr: any[] = [];
idealforArr: any[] = [];
shapeArr: any[] = [];
framecolorArr: any[] = [];
typeArr: any[] = [];
colorArr: any[] = [];
meterialArr: any[] = [];
sizeArr: any[] = [];
styleArr: any[] = [];
stoneArr: any[] = [];
weightArr: any[] = [];
occasionArr: any[] = [];
framesizeArr: any[] = [];
lenscolorArr: any[] = [];
frame_typeArr: any[] = [];
frame_materialArr: any[] = [];
strap_materialArr: any[] = [];
strap_colorArr: any[] = [];
dial_colorArr: any[] = [];
dial_ShapeArr: any[] = [];
constructor(
private ProductService: ProductService,
private CategoryService: CategoryService,
private route: ActivatedRoute,
private router: Router,
private spinner: NgxSpinnerService) {
this.config = {
currentPage: 1,
itemsPerPage: 16,
totalItems: 0,
filterPerms: {}
};
this.config.filterPerms.slug = this.route.snapshot.paramMap.get('slug')? this.route.snapshot.paramMap.get('slug') : 'bags';
}
priceSliderMinValue: number = 100;
priceSliderMaxValue: number = 9999;
options: Options = {
floor: this.priceSliderMinValue,
ceil: this.priceSliderMaxValue,
step: 10,
// showTicks: true,
translate: (value: number, label: LabelType): string => {
switch (label) {
case LabelType.Low:
return '$' + value;
case LabelType.High:
return '$' + value;
default:
return '$' + value;
}
}
};
onPriceChangeEnd(changeContext: ChangeContext): void {
this.config.filterPerms.min_price = changeContext.value;
this.config.filterPerms.max_price = changeContext.highValue;
this.resetLoadMore();
this.getProducts();
}
value: number = 1;
highValue: number = 10;
optionsdistance: Options = {
floor: 1,
ceil: 10,
step: 1,
showTicks: true,
translate: (value: number, label: LabelType): string => {
switch (label) {
case LabelType.Low:
return value + 'KM';
case LabelType.High:
return value + 'KM';
default:
return value + 'KM';
}
}
};
brandChecked(event){
let sCriteriaStr = event.target.name;
let sCriteria = sCriteriaStr.replace("chk_", "");
if (sCriteria === 'brand') {
this.config.filterPerms.brand = this.findSearchableString(event, this.brandArr, sCriteria);
}
if (sCriteria === 'idealfor') {
this.config.filterPerms.idealfor = this.findSearchableString(event, this.idealforArr, sCriteria);
}
if (sCriteria === 'shape') {
this.config.filterPerms.shape = this.findSearchableString(event, this.shapeArr, sCriteria);
}
if (sCriteria === 'framecolor') {
this.config.filterPerms.framecolor = this.findSearchableString(event, this.framecolorArr, sCriteria);
}
if (sCriteria === 'type') {
this.config.filterPerms.type = this.findSearchableString(event, this.typeArr, sCriteria);
}
if (sCriteria === 'color') {
this.config.filterPerms.color = this.findSearchableString(event, this.colorArr, sCriteria);
}
if (sCriteria === 'meterial') {
this.config.filterPerms.meterial = this.findSearchableString(event, this.meterialArr, sCriteria);
}
if (sCriteria === 'size') {
this.config.filterPerms.size = this.findSearchableString(event, this.sizeArr, sCriteria);
}
if (sCriteria === 'style') {
this.config.filterPerms.style = this.findSearchableString(event, this.styleArr, sCriteria);
}
if (sCriteria === 'stone') {
this.config.filterPerms.stone = this.findSearchableString(event, this.stoneArr, sCriteria);
}
if (sCriteria === 'weight') {
this.config.filterPerms.weight = this.findSearchableString(event, this.weightArr, sCriteria);
}
if (sCriteria === 'occasion') {
this.config.filterPerms.occasion = this.findSearchableString(event, this.occasionArr, sCriteria);
}
if (sCriteria === 'framesize') {
this.config.filterPerms.framesize = this.findSearchableString(event, this.framesizeArr, sCriteria);
}
if (sCriteria === 'lenscolor') {
this.config.filterPerms.lenscolor = this.findSearchableString(event, this.lenscolorArr, sCriteria);
}
if (sCriteria === 'frame_type') {
this.config.filterPerms.frame_type = this.findSearchableString(event, this.frame_typeArr, sCriteria);
}
if (sCriteria === 'frame_material') {
this.config.filterPerms.frame_material = this.findSearchableString(event, this.frame_materialArr, sCriteria);
}
if (sCriteria === 'strap_material') {
this.config.filterPerms.strap_material = this.findSearchableString(event, this.strap_materialArr, sCriteria);
}
if (sCriteria === 'strap_color') {
this.config.filterPerms.strap_color = this.findSearchableString(event, this.strap_colorArr, sCriteria);
}
if (sCriteria === 'dial_color') {
this.config.filterPerms.dial_color = this.findSearchableString(event, this.dial_colorArr, sCriteria);
}
if (sCriteria === 'dial_Shape') {
this.config.filterPerms.dial_Shape = this.findSearchableString(event, this.dial_ShapeArr, sCriteria);
}
this.resetLoadMore();
this.getProducts();
}
findSearchableString(event, checkedArr, filterOptionKey){
let tVal = event.target.value;
if(event.target.checked) {
checkedArr.push(tVal);
}
else {
for(var i=0 ; i < this.filterOptions[filterOptionKey].length; i++) {
if(checkedArr[i] === tVal) {
checkedArr.splice(i,1);
}
}
}
return checkedArr.join('~');
}
onDateChange(event) {
if (event) {
var dtEvent = new Date(event);
let date = JSON.stringify(dtEvent)
date = date.slice(1,11);
if (date) {
this.config.filterPerms.availability_date = date;
this.resetLoadMore();
this.getProducts();
}
}
}
// pageChanged(event) {
// this.config.currentPage = event;
// }
getFilterOptions() {
return new Promise((resolve, reject) => {
this.route.params.pipe(
switchMap((params: Params) => this.CategoryService.getCategoryBySlug(this.config.filterPerms.slug)
)
).subscribe((res: any) => {
this.config.filterPerms.category = res.records;
this.isCatLoaded=true;
if (this.config.filterPerms.category[0].id) {
this.route.params.pipe(
switchMap((params: Params) => this.ProductService.getFilterOptions(this.config)
)
).subscribe((res: any) => {
this.filterOptions = res;
this.priceSliderMinValue = this.filterOptions.min;
this.priceSliderMaxValue = this.filterOptions.max;
resolve();
});
}
});
});
}
getProducts() {
this.spinner.show();
this.route.params.pipe(
switchMap((params: Params) => this.ProductService.getFilterProducts(this.config)
)
).subscribe((res: any) => {
if (!res.success) {
console.log("Error found in fetching data!");
} else {
this.spinner.hide();
this.products = res.records;
}
});
}
sortBy(sort_by) {
this.config.filterPerms.sort_by = sort_by.target.value;
if (sort_by) {
this.resetLoadMore();
this.getProducts();
}
}
resetLoadMore() {
this.config.filterPerms.lastPostId = '';
this.config.filterPerms.curNumRec = '';
}
onScroll() {
if (this.notscrolly && this.notEmptyPost) {
this.spinner.show();
this.notscrolly = false;
this.loadNextPost();
}
}
// load th next 6 posts
loadNextPost() {
if (this.isCatLoaded && this.products) {
const lastPost = this.products[0];
//this.config.filterPerms.lastPostId = lastPost.id;
this.config.filterPerms.curNumRec = this.products.length;
this.route.params.pipe(
switchMap((params: Params) => this.ProductService.getFilterProducts(this.config)
)).subscribe((res: any) => {
this.spinner.hide();
if (res.records.length === 0 ) {
this.notEmptyPost = false;
}
this.products = this.products.concat(res.records);
this.notscrolly = true;
});
}
}
ngOnInit() {
this.getFilterOptions().then(res => this.getProducts());
}
}
从'@angular/core'导入{Component，EventEmitter，Output，Input，OnInit}；
从'@angular/Router'导入{Params，Router，ActivatedRoute}；
从“rxjs/operators”导入{switchMap}；
从“ng5 slider”导入{Options，ChangeContext，PointerType，LabelType}；
从“/../services/product.service”导入{ProductService}；
从“/../../services/category.service”导入{CategoryService}；
从“ngx微调器”导入{NgxSpinnerService}；
声明var jQuery:any；
@组成部分({
选择器：“应用程序产品”，
templateUrl:“./product.component.html”，
样式URL:['./product.component.css']
})
导出类ProductComponent实现OnInit{
filterOptions:any={}；
产品：任何；
notEmptyPost=true；
notscrolly=true；
isCatLoaded=false；
数据长度：任意；
猫名：任何；
错误：{}；
配置：任意；
brandArr:any[]=[]；
idealforArr:any[]=[]；
shapeArr:any[]=[]；
framecolorArr:any[]=[]；
typeArr:any[]=[]；
colorArr:any[]=[]；
材料：任何[]=[]；
sizerar:any[]=[]；
styleArr:any[]=[]；
stoneArr:any[]=[]；
weightArr:any[]=[]；
occasioner:any[]=[]；
FrameSizer:any[]=[]；
lenscolorArr:any[]=[]；
frame_typeArr:任意[]=[]；
frame_materialArr:任意[]=[]；
织带材料RR：任何[]=[]；
表带颜色：任意[]=[]；
拨号颜色：任意[]=[]；
拨盘形状：任意[]=[]；
建造师(
私人产品服务：产品服务，
私有类别服务：类别服务，
专用路由：激活的路由，
专用路由器：路由器，
专用微调器：NgxSpinnerService）{
this.config={
当前页面：1，
项目页码：16，
总计项目：0，
筛选项：{}
};
this.config.filterPerms.slug=this.route.snapshot.paramMap.get（'slug'）？this.route.snapshot.paramMap.get（'slug'）：'bags'；
}
priceSliderMinValue:数字=100；
priceSliderMaxValue:number=9999；
选项：选项={
楼层：这是priceSliderMinValue，
ceil:this.priceSliderMaxValue，
步骤：10，
//是的，
翻译：（值：数字，标签：LabelType）：字符串=>{
开关（标签）{
案例标签类型。低：
返回“$”+值；
案例标签类型。高：
返回“$”+值；
违约：
返回“$”+值；
}
}
};
onPriceChangeEnd（changeContext:changeContext）：无效{
this.config.filterPerms.min_price=changeContext.value；
this.config.filterPerms.max_price=changeContext.highValue；
这是resetLoadMore（）；
这个.getProducts（）；
}
值：数字=1；
高值：数字=10；
选项距离：选项={
发言：1，
ceil:10，
步骤：1，
是的，
翻译：（值：数字，标签：LabelType）：字符串=>{
开关（标签）{
案例标签类型。低：
返回值+公里数；
案例标签类型。高：
返回值+公里数；
违约：
返回值+公里数；
}
}
};
品牌检查（事件）{
让sCriteriaStr=event.target.name；
让sCriteria=sCriteriaStr.replace（“chk_”）替换；
如果（sCriteria==‘品牌’）{
this.config.filterPerms.brand=this.findSearchableString（事件，this.brandArr，sCriteria）；
}
如果（sCriteria==='idealfor'）{
this.config.filterPerms.idealfor=this.findSearchableString（事件，this.idealforArr，sCriteria）；
}
如果（sCriteria==='shape'）{
this.config.filterPerms.shape=this.findSearchableString（事件，this.shapeArr，sCriteria）；
}
如果（sCriteria=='framecolor'）{
this.config.filterPerms.framecolor=this.findSearchableString（事件，this.framecolorArr，sCriteria）；
}
如果（sCriteria=='type'）{
this.config.filterPerms.type=this.findSearchableString（事件，this.typeArr，sCriteria）；
}
如果（sCriteria==‘颜色’）{
this.config.filterPerms.color=this.findSearchableString（事件，this.colorArr，sCriteria）；
}
如果（sCriteria==‘材料’）{
this.config.filterPerms.materia=this.findsearchablesting（事件，this.meterialar，sCriteria）；
}
如果（sCriteria=='size'）{
this.config.filterPerms.size=this.findSearchableString（事件，this.sizer，sCriteria）；
}
如果（sCriteria==='style'）{
this.config.filterPerms.style=this.findSearchableString（事件，this.styleArr，sCriteria）；
}
如果（sCriteria==='stone'）{
this.config.filterPerms.stone=this.findsearcablestring（事件，this.stoneArr，sCriteria）；
}
如果（sCriteria==‘重量’）{
this.config.filterPerms.weight=this.findSearchableString（事件，this.weightArr，sCriteria）；
}
如果（sCriteria==‘场合’）{
this.config.filterPerms.sition=this.findSearchableString（事件，this.occasioner，sCriteria）；
}
如果（sCriteria=='framesize'）{
this.config.filterPerms.framesize=this.findSearchableString（事件，this.frameSizer，sCriteria）；
}
如果（sCriteria==='lenscolor'）{
this.config.filterPerms.lenscolor=this.findSearchableString（事件，this.lenscolorArr，sCriteria）；
}
如果（sCriteria===“帧类型”）{
this.config.filterPerms.frame_type=this.findSearchableString（事件，this.frame_typeArr，sCriteria）；
}
<header class="site-header">
<div class="container">
<div class="align-items-center row">
<div class="col-lg-3">
<div class="logo">
<a [routerLink]="['/']">
<img src="assets/images/deluxify-logo.png" alt="Deluxify">
</a>
</div>
</div>
<div class="col-lg-9">
<div class="headertopright">
<nav class="main-navigation">
<ul class="menu">
<li><a [routerLink]="['categories']">Discover</a></li>
<li><a [routerLink]="['how-it-works']">How It Works</a></li>
<li><a [routerLink]="['faq']">FAQ</a></li>
<li><a [routerLink]="['contact']">Contact</a></li>
</ul>
</nav>
<div class="searchbox">
<div class="txtdiv">
<input type="text"
placeholder="Search"
name="search" class="searchfield"
autocomplete="off"
>
</div>
<div class="selectDiv">
<select id="head_category">
<option value="bags">Bags</option>
<option value="jewellery">Jewellery</option>
<option value="sunglasses">Sunglasses</option>
<option value="watches">Watches</option>
</select>
</div>
</div>
<a href="javascript:void(0)" class="togglemenu menu-trigger">
<span></span>
<span></span>
<span></span>
</a>
<a [routerLink]="['/','category', 'bags']" class="togglesearch searchicon"></a>
</div>
</div>
</div>
</div>
</header>
import { Component, OnInit } from '@angular/core';
declare var jQuery:any;
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}
import { Component, EventEmitter, Output, Input, OnInit } from '@angular/core';
import { Params, Router, ActivatedRoute } from '@angular/router';
import {switchMap} from 'rxjs/operators';
import { Options, ChangeContext, PointerType, LabelType } from 'ng5-slider';
import { ProductService } from './../../services/product.service';
import { CategoryService } from './../../services/category.service';
import { NgxSpinnerService } from 'ngx-spinner';
declare var jQuery: any;
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
filterOptions:any = {};
products: any;
notEmptyPost = true;
notscrolly = true;
isCatLoaded = false;
dataLength: any;
catname: any;
error: {};
config: any;
brandArr: any[] = [];
idealforArr: any[] = [];
shapeArr: any[] = [];
framecolorArr: any[] = [];
typeArr: any[] = [];
colorArr: any[] = [];
meterialArr: any[] = [];
sizeArr: any[] = [];
styleArr: any[] = [];
stoneArr: any[] = [];
weightArr: any[] = [];
occasionArr: any[] = [];
framesizeArr: any[] = [];
lenscolorArr: any[] = [];
frame_typeArr: any[] = [];
frame_materialArr: any[] = [];
strap_materialArr: any[] = [];
strap_colorArr: any[] = [];
dial_colorArr: any[] = [];
dial_ShapeArr: any[] = [];
constructor(
private ProductService: ProductService,
private CategoryService: CategoryService,
private route: ActivatedRoute,
private router: Router,
private spinner: NgxSpinnerService) {
this.config = {
currentPage: 1,
itemsPerPage: 16,
totalItems: 0,
filterPerms: {}
};
this.config.filterPerms.slug = this.route.snapshot.paramMap.get('slug')? this.route.snapshot.paramMap.get('slug') : 'bags';
}
priceSliderMinValue: number = 100;
priceSliderMaxValue: number = 9999;
options: Options = {
floor: this.priceSliderMinValue,
ceil: this.priceSliderMaxValue,
step: 10,
// showTicks: true,
translate: (value: number, label: LabelType): string => {
switch (label) {
case LabelType.Low:
return '$' + value;
case LabelType.High:
return '$' + value;
default:
return '$' + value;
}
}
};
onPriceChangeEnd(changeContext: ChangeContext): void {
this.config.filterPerms.min_price = changeContext.value;
this.config.filterPerms.max_price = changeContext.highValue;
this.resetLoadMore();
this.getProducts();
}
value: number = 1;
highValue: number = 10;
optionsdistance: Options = {
floor: 1,
ceil: 10,
step: 1,
showTicks: true,
translate: (value: number, label: LabelType): string => {
switch (label) {
case LabelType.Low:
return value + 'KM';
case LabelType.High:
return value + 'KM';
default:
return value + 'KM';
}
}
};
brandChecked(event){
let sCriteriaStr = event.target.name;
let sCriteria = sCriteriaStr.replace("chk_", "");
if (sCriteria === 'brand') {
this.config.filterPerms.brand = this.findSearchableString(event, this.brandArr, sCriteria);
}
if (sCriteria === 'idealfor') {
this.config.filterPerms.idealfor = this.findSearchableString(event, this.idealforArr, sCriteria);
}
if (sCriteria === 'shape') {
this.config.filterPerms.shape = this.findSearchableString(event, this.shapeArr, sCriteria);
}
if (sCriteria === 'framecolor') {
this.config.filterPerms.framecolor = this.findSearchableString(event, this.framecolorArr, sCriteria);
}
if (sCriteria === 'type') {
this.config.filterPerms.type = this.findSearchableString(event, this.typeArr, sCriteria);
}
if (sCriteria === 'color') {
this.config.filterPerms.color = this.findSearchableString(event, this.colorArr, sCriteria);
}
if (sCriteria === 'meterial') {
this.config.filterPerms.meterial = this.findSearchableString(event, this.meterialArr, sCriteria);
}
if (sCriteria === 'size') {
this.config.filterPerms.size = this.findSearchableString(event, this.sizeArr, sCriteria);
}
if (sCriteria === 'style') {
this.config.filterPerms.style = this.findSearchableString(event, this.styleArr, sCriteria);
}
if (sCriteria === 'stone') {
this.config.filterPerms.stone = this.findSearchableString(event, this.stoneArr, sCriteria);
}
if (sCriteria === 'weight') {
this.config.filterPerms.weight = this.findSearchableString(event, this.weightArr, sCriteria);
}
if (sCriteria === 'occasion') {
this.config.filterPerms.occasion = this.findSearchableString(event, this.occasionArr, sCriteria);
}
if (sCriteria === 'framesize') {
this.config.filterPerms.framesize = this.findSearchableString(event, this.framesizeArr, sCriteria);
}
if (sCriteria === 'lenscolor') {
this.config.filterPerms.lenscolor = this.findSearchableString(event, this.lenscolorArr, sCriteria);
}
if (sCriteria === 'frame_type') {
this.config.filterPerms.frame_type = this.findSearchableString(event, this.frame_typeArr, sCriteria);
}
if (sCriteria === 'frame_material') {
this.config.filterPerms.frame_material = this.findSearchableString(event, this.frame_materialArr, sCriteria);
}
if (sCriteria === 'strap_material') {
this.config.filterPerms.strap_material = this.findSearchableString(event, this.strap_materialArr, sCriteria);
}
if (sCriteria === 'strap_color') {
this.config.filterPerms.strap_color = this.findSearchableString(event, this.strap_colorArr, sCriteria);
}
if (sCriteria === 'dial_color') {
this.config.filterPerms.dial_color = this.findSearchableString(event, this.dial_colorArr, sCriteria);
}
if (sCriteria === 'dial_Shape') {
this.config.filterPerms.dial_Shape = this.findSearchableString(event, this.dial_ShapeArr, sCriteria);
}
this.resetLoadMore();
this.getProducts();
}
findSearchableString(event, checkedArr, filterOptionKey){
let tVal = event.target.value;
if(event.target.checked) {
checkedArr.push(tVal);
}
else {
for(var i=0 ; i < this.filterOptions[filterOptionKey].length; i++) {
if(checkedArr[i] === tVal) {
checkedArr.splice(i,1);
}
}
}
return checkedArr.join('~');
}
onDateChange(event) {
if (event) {
var dtEvent = new Date(event);
let date = JSON.stringify(dtEvent)
date = date.slice(1,11);
if (date) {
this.config.filterPerms.availability_date = date;
this.resetLoadMore();
this.getProducts();
}
}
}
// pageChanged(event) {
// this.config.currentPage = event;
// }
getFilterOptions() {
return new Promise((resolve, reject) => {
this.route.params.pipe(
switchMap((params: Params) => this.CategoryService.getCategoryBySlug(this.config.filterPerms.slug)
)
).subscribe((res: any) => {
this.config.filterPerms.category = res.records;
this.isCatLoaded=true;
if (this.config.filterPerms.category[0].id) {
this.route.params.pipe(
switchMap((params: Params) => this.ProductService.getFilterOptions(this.config)
)
).subscribe((res: any) => {
this.filterOptions = res;
this.priceSliderMinValue = this.filterOptions.min;
this.priceSliderMaxValue = this.filterOptions.max;
resolve();
});
}
});
});
}
getProducts() {
this.spinner.show();
this.route.params.pipe(
switchMap((params: Params) => this.ProductService.getFilterProducts(this.config)
)
).subscribe((res: any) => {
if (!res.success) {
console.log("Error found in fetching data!");
} else {
this.spinner.hide();
this.products = res.records;
}
});
}
sortBy(sort_by) {
this.config.filterPerms.sort_by = sort_by.target.value;
if (sort_by) {
this.resetLoadMore();
this.getProducts();
}
}
resetLoadMore() {
this.config.filterPerms.lastPostId = '';
this.config.filterPerms.curNumRec = '';
}
onScroll() {
if (this.notscrolly && this.notEmptyPost) {
this.spinner.show();
this.notscrolly = false;
this.loadNextPost();
}
}
// load th next 6 posts
loadNextPost() {
if (this.isCatLoaded && this.products) {
const lastPost = this.products[0];
//this.config.filterPerms.lastPostId = lastPost.id;
this.config.filterPerms.curNumRec = this.products.length;
this.route.params.pipe(
switchMap((params: Params) => this.ProductService.getFilterProducts(this.config)
)).subscribe((res: any) => {
this.spinner.hide();
if (res.records.length === 0 ) {
this.notEmptyPost = false;
}
this.products = this.products.concat(res.records);
this.notscrolly = true;
});
}
}
ngOnInit() {
this.getFilterOptions().then(res => this.getProducts());
}
}
@Injectable({
providedIn: 'root'
})
export class GlobalSearchService {
public searchTerm: BehaviorSubject<string> = new BehaviorSubject<string>(null);
}
<input (input)="onInput($event)" type="text" placeholder="Search" name="search" class="searchfield" autocomplete="off" >
public onInput(event: any){
// this pushes the input value into the service's Observable.
this.globalSearchService.searchTerm.next(event.target.value);
}
ngOnInit(){
// this listens to the input value from the service and does something on change.
this.globalSearchService.searchTerm.subscribe((newValue: string) => {
// this is where you would apply your existing filtering.
this.searchTerm = newValue;
});
}