admin管理员组文章数量:1410712
Please find my existing script,
Directory Structure:
App/
->Classes
->Components
->Services Index.html
Script Sample:
Index.html
<html lang="en">
<head>
</head>
<body>
<app-root></app-root>
</body>
</html>
App/app.module.ts
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/mon/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CookieService } from 'ngx-cookie-service';
import { environment } from 'src/environments/environment';
// Datepicker module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { OwlModule } from 'ngx-owl-carousel';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { AppComponent } from './appponent';
import { HeaderComponent } from './ponents/header/headerponent';
import { FooterComponent } from './ponents/footer/footerponent';
import { HomeComponent } from './ponents/home/homeponent';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
HomeComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
OwlModule,
CarouselModule.forRoot(),
BrowserAnimationsModule,
BsDatepickerModule
],
providers: [CookieService, Title, { provide: 'BASE_API_URL', useValue: environment.baseUrl}],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {}
}
appponent.html
<div class="page-wrapper">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
Header Component HTML:
<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"
autoplete="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>
Header Component TS file:
import { Component, OnInit } from '@angular/core';
declare var jQuery:any;
@Component({
selector: 'app-header',
templateUrl: './headerponent.html',
styleUrls: ['./headerponent.css']
})
export class HeaderComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}
Search Component ts
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: './productponent.html',
styleUrls: ['./productponent.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());
}
}
I am facing issue in search from header all filter script performs perfectly which are write in search ponent but search by keyword defined in header ponent then how to perform search from header.
Both ponent are parent there is no relation between child and parent concept you can view the ponent relation in appponent.html file.
Search page load on demand and header footer page load while start the project.
So please help anyone how to do it with better way.
Please find my existing script,
Directory Structure:
App/
->Classes
->Components
->Services Index.html
Script Sample:
Index.html
<html lang="en">
<head>
</head>
<body>
<app-root></app-root>
</body>
</html>
App/app.module.ts
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/mon/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CookieService } from 'ngx-cookie-service';
import { environment } from 'src/environments/environment';
// Datepicker module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { OwlModule } from 'ngx-owl-carousel';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { AppComponent } from './app.ponent';
import { HeaderComponent } from './ponents/header/header.ponent';
import { FooterComponent } from './ponents/footer/footer.ponent';
import { HomeComponent } from './ponents/home/home.ponent';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
HomeComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
OwlModule,
CarouselModule.forRoot(),
BrowserAnimationsModule,
BsDatepickerModule
],
providers: [CookieService, Title, { provide: 'BASE_API_URL', useValue: environment.baseUrl}],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {}
}
app.ponent.html
<div class="page-wrapper">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
Header Component HTML:
<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"
autoplete="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>
Header Component TS file:
import { Component, OnInit } from '@angular/core';
declare var jQuery:any;
@Component({
selector: 'app-header',
templateUrl: './header.ponent.html',
styleUrls: ['./header.ponent.css']
})
export class HeaderComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}
Search Component ts
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.ponent.html',
styleUrls: ['./product.ponent.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());
}
}
I am facing issue in search from header all filter script performs perfectly which are write in search ponent but search by keyword defined in header ponent then how to perform search from header.
Both ponent are parent there is no relation between child and parent concept you can view the ponent relation in app.ponent.html file.
Search page load on demand and header footer page load while start the project.
So please help anyone how to do it with better way.
Share Improve this question edited Feb 26, 2020 at 8:06 Zze 18.9k14 gold badges95 silver badges125 bronze badges asked Feb 26, 2020 at 7:12 Ashok KumarAshok Kumar 3341 gold badge4 silver badges16 bronze badges 3- 1 Maybe make a service with an observable you can listen to? – Zze Commented Feb 26, 2020 at 7:30
- 1 No actually I am new in Angular so would you brief me with more detail if it possible. – Ashok Kumar Commented Feb 26, 2020 at 7:35
- I would suggest that you continue learning the basics. Especially service injection and observables. Posting the whole project without any context does not help. If you want others help then you should also take some efforts to ask properly. – Ling Vu Commented Feb 26, 2020 at 8:27
1 Answer
Reset to default 5What you have done so far is pletely fine. I have created a working example of the code I have below: https://stackblitz./edit/angular-khwjt3?file=src%2Fapp%2Fapp.ponent.ts
First, need to add a new service. This service will relay all search input events out to anything in your app that listens to it.
@Injectable({
providedIn: 'root'
})
export class GlobalSearchService {
public searchTerm: BehaviorSubject<string> = new BehaviorSubject<string>(null);
}
HeaderComponent.html Add a new input event to your search box
<input (input)="onInput($event)" type="text" placeholder="Search" name="search" class="searchfield" autoplete="off" >
HeaderComponent.ts Add an event listener for it
public onInput(event: any){
// this pushes the input value into the service's Observable.
this.globalSearchService.searchTerm.next(event.target.value);
}
Product Component.ts Now we just have to subscribe to our new Observable.
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;
});
}
本文标签： javascriptHow to Perform Global Search in Angular 89Stack Overflow
版权声明：本文标题：javascript - How to Perform Global Search in Angular 89? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745048552a2639510.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论