### 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)`
Defined in src/app/product/components/product-detail-page/product-detail-page.component.ts:17

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/product/components/product-detail-page/product-detail-page.component.ts:38
Returns: `void`

addToCart
`addToCart()`
Defined in src/app/product/components/product-detail-page/product-detail-page.component.ts:45
Action To be dispatched when added to cart Returns: `void`

### Properties

actionsSubscription
`actionsSubscription: `Subscription``
Defined in src/app/product/components/product-detail-page/product-detail-page.component.ts:14

product$
`product$: `Product``
Defined in src/app/product/components/product-detail-page/product-detail-page.component.ts:15

productId
`productId: `any``
Defined in src/app/product/components/product-detail-page/product-detail-page.component.ts:17

routeSubs
`routeSubs: `Subscription``
Defined in src/app/product/components/product-detail-page/product-detail-page.component.ts:16

    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 ""