JAVASCRIPT

sort used in price high and low using angular

<main role="main" data-aos="fade-right" data-aos-duration="1000">
<div class="jumbotron section">
  <div class="container">
    <div class="d-flex flex-row">
      <div class="col-2">
        <div><strong>Shop by Product</strong></div>
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" routerLink="/shop">View All</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/recently-added">New Arrival</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/category/Necklaces">Necklaces</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/category/Bracelets-Anklets">Bracelets and Anklets</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/category/Earrings">Earrings</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/category/Rings">Rings</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/best-sellers">Bestsellers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/shop/category/Other">Others</a>
          </li>
        </ul>
      </div>
      <div class="col-10">
        <div class="d-flex justify-content-start flex-wrap" *ngIf="products$">
          <div class="card mx-2" *ngFor="let product of products$; let i = index" [routerLink]="['/product/', product._id]">
            <div class="img-hover-zoom"> <img src="{{product.imageUrl}}" class="img-fluid card-img-top" /></div>
            <div class="card-body">
              <div class="card-text">
                <a>
                  <span style="font-weight: bold;">{{ product.name }}</span>
                </a>
              </div>
              <div class="card-title">Php {{ product.price }}</div>
              <p *ngIf="product.stock_quantity == 0" style="color: red;font-size: 12pt;">Out of stock</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <select>
          <option selected value="undefined" disabled>
            Choose Category
          </option>
          <option value="l2h">Price: Low to High</option>
          <option value="h2l">Price: High to Low</option>
        </select>
      </div>
    </div>
  </div>
</div>
<a routerLink="/shop" id="back-to-top" class="back-to-top" style="display: inline;">
  <i class="fa fa-arrow-up pt-3 pl-2 ml-2"></i>
</a>