Dfyjkt

Here i am using two component

1) product-filter.component (sorting product based on price)

2) products.component (all product page)

product-filter.component.html

<mat-expansion-panel expanded>
 <mat-expansion-panel-header>
 <mat-panel-title>
 <h4>Price</h4>
 </mat-panel-title>
 </mat-expansion-panel-header>
 <div fxLayout="row" fxLayoutAlign="space-between center" class="text-muted">
 <span>From: <b>$matslider1.value</b></span>
 <span>To: <b>$matslider2.value</b></span>
 </div>
 <div fxLayout="row" fxLayoutAlign="space-between center" class="filter-price">
 <mat-slider color="primary" min="0" max="500" step="10" #matslider1 (input)="startPrice($event.value)"></mat-slider>
 <mat-slider color="warn" min="0" max="1000" step="10" #matslider2 (input)="endPrice($event.value)"></mat-slider>
 </div>
</mat-expansion-panel>

product-filter.component.ts

 // #################### Shorting Start price ############################
 startPrice(event: any) 
 this.fromPrice = event;
 if (this.fromPrice == 0 && this.toPrice == 0) 
 this.pricesorting = this.products

 
 else if (this.toPrice != 0) 
 if (this.ml != 0) 
 var sorting = ;
 for (let i = 0; i < this.sortingdata.length; i++) 
 if (this.sortingdata[i]['newPrice'][0]['newPrice'] >= this.fromPrice && this.sortingdata[i]['newPrice'][0]['newPrice'] <= this.toPrice) 
 sorting.push(this.pricesorting[i]);
 
 
 this.pricesorting = sorting;
 else 
 this.pricesorting = ;
 for (let i = 0; i < this.products.length; i++) 
 if (this.products[i]['newPrice'][0]['newPrice'] >= this.fromPrice && this.products[i]['newPrice'][0]['newPrice'] <= this.toPrice) 
 this.pricesorting.push(this.products[i])

 
 
 

 
 else if (this.toPrice == 0) 
 this.pricesorting = ;
 for (let i = 0; i < this.products.length; i++) 
 if (this.products[i]['newPrice'][0]['newPrice'] >= this.fromPrice) 
 this.pricesorting.push(this.products[i])
 
 

 
 console.log(this.pricesorting)

 

 // #################### Shorting Ending price ############################
 endPrice(event: any) 
 this.toPrice = event;
 if (this.fromPrice > 0 && this.toPrice == 0) 
 var sorting = 
 for (let i = 0; i < this.products.length; i++) 
 if (this.products[i]['newPrice'][0]['newPrice'] >= this.fromPrice) 
 sorting.push(this.products[i]);
 
 
 this.pricesorting = sorting;
 
 else if (this.fromPrice == 0 && this.toPrice == 0) 
 this.pricesorting = this.products
 
 else if (this.ml != 0) 
 var sorting = 
 for (let i = 0; i < this.sortingdata.length; i++) 
 if (this.sortingdata[i]['newPrice'][0]['newPrice'] >= this.fromPrice && this.sortingdata[i]['newPrice'][0]['newPrice'] <= this.toPrice) 
 sorting.push(this.sortingdata[i]);
 
 
 this.pricesorting = sorting;
 else 
 this.pricesorting = 
 for (let i = 0; i < this.products.length; i++) 
 if (this.products[i]['newPrice'][0]['newPrice'] >= this.fromPrice && this.products[i]['newPrice'][0]['newPrice'] <= this.toPrice) 
 this.pricesorting.push(this.products[i])
 
 
 
 this.buttondata = this.pricesorting;
 // console.log(this.pricesorting)
 

products.component.html

<mat-sidenav-container>
 <mat-sidenav #sidenav [opened]="sidenavOpen" [mode]="sidenavOpen ? 'side' : 'over'" class="filter-sidenav"
 perfectScrollbar>
 <mat-accordion displayMode="flat" multi="true">
 <!-------------------- Price range ---------------------->
 <app-price-filter></app-price-filter>
 <!-------------------- Price range ends ---------------------->
 </mat-accordion>
 </mat-sidenav>
 <mat-sidenav-content class="all-products" ngClass.gt-sm="p-left">
 <div *ngIf="pricesorting.length == 0">
 <h1 class="py-1 text-muted lh" style=" text-align: center;"> No Result Found .</h1>
 </div>
 <div *ngIf="pricesorting.length != 0">
 <div *ngIf="viewType == 'grid'" fxLayout="row wrap" class="products-wrapper">
 <div *ngFor="let product of pricesorting | paginate: itemsPerPage: count, currentPage: page " fxFlex="100"
 [fxFlex.gt-sm]="viewCol" fxFlex.sm="50" class="col">
 <mat-card class="product-item text-center hover-border">
 <mat-chip-list *ngIf="product.discount != 0">
 <mat-chip color="warn" selected="true">product.discount% OFF</mat-chip>
 </mat-chip-list>
 <a [routerLink]="['/products/single', product.productId]" class="image-link">
 <img [src]="imageHost + product.images[0].medium" alt="">
 </a>
 <h4 class="category text-muted"> filterById :
 product.categoryId )?.name </h4>
 <a [routerLink]="['/products/single', product.productId]" class="title text-truncate">
 product.name
 </a>
 <div fxLayout="row" fxLayoutAlign="space-between center" class="prices">
 <div fxLayout="column" fxLayoutAlign="center start">
 <!-- <p class="old-price text-muted"><span *ngIf="product.oldPrice">$ number : '1.2-2'</span></p> -->
 <p class="new-price">$product.newPrice[0].newPrice </p>
 </div>
 <app-rating [ratingsCount]="product.ratingsCount" [ratingsValue]="product.ratingsValue"
 [direction]="'column'"></app-rating>
 </div>
 <div class="divider mt-2"></div>
 <div class="icons">
 <app-controls [product]="product" (onOpenProductDialog)="openProductDialog(product)"></app-controls>
 </div>
 </mat-card>
 </div>
 </div>
 </div>
 </mat-sidenav-content>
</mat-sidenav-container> 

in this component i am able to get the products based on price sorting in console am getting it.
i want to pass this this.pricesorting to products.component.html so please tell me how to do this

In product-filter.component.ts, you can emit an event using Event.Emitter().

public priceData = new EventEmitter<any>(null);
this.priceData.emit(this.pricesorting);

products.component.html

<app-price-filter (priceData)="handlePriceData($event)"></app-price-filter>

products.component.ts

handlePriceData(price)
 console.log(price);