File

src/app/product/components/product-detail-page/product-detail-page.component.ts

Implements

OnInit

Metadata

selector app-product-detail-page
styleUrls product-detail-page.component.css
templateUrl ./product-detail-page.component.html

Constructor

constructor(productService: ProductService, route: ActivatedRoute)

Methods

ngOnInit
ngOnInit()
Returns: void
addToCart
addToCart()

Action To be dispatched
when added to cart

Returns: void

Properties

actionsSubscription
actionsSubscription: Subscription
product$
product$: Product
productId
productId: any
routeSubs
routeSubs: Subscription
import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
import { ActivatedRoute } from '@angular/router';
import { Product } from './../../../core/models/product';
import { ProductService } from './../../../core/services/product.service';

@Component({
  selector: 'app-product-detail-page',
  templateUrl: './product-detail-page.component.html',
  styleUrls: ['./product-detail-page.component.css']
})
export class ProductDetailPageComponent implements OnInit {
  actionsSubscription: Subscription;
  product$: Product = null;
  routeSubs: Subscription;
  productId: any;

  constructor(private productService: ProductService,
              private route: ActivatedRoute) {

  /**On Init
   * 1. Parse route params
   * 2. Retrive product id
   * 3. Ask for the product detail based on product id 
   * */
    this.actionsSubscription = this.route.params.subscribe(
      (params: any) => {
        this.productId = params['id'];
        this.productService
          .getProduct(this.productId)
          .subscribe(response => this.product$ = response);
     }
    );
  };


  ngOnInit() {
  }

  /**
   * Action To be dispatched
   * when added to cart
   */
  addToCart(){
    return;
  }

}
<div *ngIf="product$ != null">
  <app-product-details [product]="product$"></app-product-details>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""