### File

`src/app/home/content/product-list/product-list.component.ts`

### Implements

`OnInit`

### Metadata

selector | `app-product-list`
styleUrls | `product-list.component.scss`
templateUrl | `./product-list.component.html`

### Inputs

`products` |
Defined in src/app/home/content/product-list/product-list.component.ts:17

`taxonIds` |
Defined in src/app/home/content/product-list/product-list.component.ts:18

`toggleLayout` |
Defined in src/app/home/content/product-list/product-list.component.ts:19

### Constructor

`constructor(checkoutService: CheckoutService, store: Store, checkoutActions: CheckoutActions)`
Defined in src/app/home/content/product-list/product-list.component.ts:19

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/home/content/product-list/product-list.component.ts:26
Returns: `void`

getProductImageUrl
`getProductImageUrl(url: any)`
Defined in src/app/home/content/product-list/product-list.component.ts:28
Returns: `void`

addToCart
`addToCart(product: Product)`
Defined in src/app/home/content/product-list/product-list.component.ts:32
Returns: `void`

getMargin
`getMargin()`
Defined in src/app/home/content/product-list/product-list.component.ts:37
Returns: `void`

    import { getSelectedTaxonIds } from './../../reducers/selectors';
    import { Observable } from 'rxjs/Observable';
    import { CheckoutService } from './../../../core/services/checkout.service';
    import { CheckoutActions } from './../../../checkout/actions/checkout.actions';
    import { AppState } from './../../../interfaces';
    import { Store } from '@ngrx/store';
    import { Product } from './../../../core/models/product';
    import { environment } from './../../../../environments/environment';
    import { Component, OnInit, Input } from '@angular/core';

    @Component({
      selector: 'app-product-list',
      templateUrl: './product-list.component.html',
      styleUrls: ['./product-list.component.scss']
    })
    export class ProductListComponent implements OnInit {
      @Input() products;
      @Input('taxonIds') selectedTaxonIds;
      @Input() toggleLayout;

      constructor(
        private checkoutService: CheckoutService,
        private store: Store<AppState>,
        private checkoutActions: CheckoutActions) { }

      ngOnInit() { }

      getProductImageUrl(url) {
        return environment.API_ENDPOINT + url;
      }

      addToCart(product: Product) {
        const variant_id = product.master.id;
        this.store.dispatch(this.checkoutActions.addToCart(variant_id));
      }

      getMargin() {
        return this.toggleLayout.size === 'COZY' ? '0 15px 20px 0' : '0 80px 20px 0';
      }

    }

    <div class="row-base" style="display: -webkit-flex">
      <section>
        <ul class="results-base">
          <p *ngIf="products.length === 0">No Products found for this category</p>
          <li *ngFor="let product of products | filter : selectedTaxonIds" class="product-base" [style.margin]="getMargin()">
            <div class="product-thumbShim"></div>
            <a [routerLink]="['/product/', product.slug]">
              <img class="product-thumb"
                   alt="{{product.name}}"
                   [src]="getProductImageUrl(product.master.images[0]?.product_url)">
              <div class="product-productMetaInfo">
                <div class="product-brand">{{ product.name }}</div>
                <h2 class="product-product">{{ product.description }}</h2>
                <div class="product-price">
                  <span>
                    <!-- Discounted price -->
                    <span class="product-discountedPrice">$ {{ product.price }}</span>
                    <!-- Original price -->
                    <!--<span class="product-strike"> react-text: 485 Rs.  /react-text  react-text: 486 1699 /react-text </span>-->
                  </span>
                  <!--Percentage off --><!--<span class="product-discountPercentage">(40% OFF)</span>-->
                </div>
                <!-- Product Size --><!--<div class="product-sizes">Sizes: S, M, L, XL, XXL</div>-->
              </div>
            </a>
            <div class="product-sizeDisplayDiv">
              <div class="product-sizeDisplayHeader">
                <span>Select a size</span>
                <span class="myntraweb-sprite product-sizeDisplayRemoveMark sprites-remove"></span>
              </div>
              <div class="product-sizeButtonsContaier">
                <button class="product-sizeButton">S</button>
                <button class="product-sizeButton">M</button>
                <button class="product-sizeButton">L</button>
                <button class="product-sizeButton">XL</button>
                <button class="product-sizeButton">XXL</button>
              </div>
            </div>
            <div class="product-actions">
              <span class="product-actionsButton product-wishlist coming-soon">save</span>
              <span class="product-actionsButton product-addToBag">
                <span (click)="addToCart(product)">Add to bag</span>
              </span>
            </div>
          </li>
        </ul>
      </section>
    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""