Call Other Components Function in Angular 2 using Typescript

Question

Guys I am new to Angular 2 and basically I want to use the value of one component in the other component so that I am able to populate data on the basis of that value.

Basically I have three Components App.Component, Category.Component and Products.Component.

App.Component is the parent of both components.

Here is the Category.Component Code

@Component({
selector: 'Categories',
template: `<li *ngFor="#category of categories">
                <a class="" href="{{category.Id}}" (click)="getCategoryProducts(category)">{{category.Name}}</a>
           </li>`,
providers :[CategoryService]

})
export class CategoriesComponent {
getData: string;
private categories: CategoryModel[] = [];
private products:ProductModel[] = [];
private productsComponent:ProductsComponent;
constructor(private _categoryService : CategoryService){
    this._categoryService.getCategories()
    .subscribe(
        a=>{
            this.categories = a;
        }
    );
    console.log(this.getData);

}

getCategoryProducts(category:CategoryModel)
{
    this._categoryService.getProducts(category.Id)
    .subscribe(
        a=>{
            this.products = a;
            this.productsComponent.populateProducts(this.products);
        }
    );
}


}

Here is the Products.Component Code

@Component({
selector: 'products',
template: `<div class="products-wrapper grid-4 products clearfix loading">
            <div *ngFor="#product of products"  (click)="getProduct(product)" class="product">
                <div class="product-inner" style="background:url({{product.pictureUrl}})">
                    <div class="time-left">
                        <span class="text">Hourly Deal</span>
                        <ul class="countdown clearfix">
                            <li> 
                                <div class="text">
                                    <span class="hours">00</span>
                                </div>
                            </li>

                            <li> 
                                <div class="text">
                                    <span class="minutes">00</span>
                                </div>
                            </li>
                            <li> 
                                <div class="text">
                                    <span class="seconds">00</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <span class="discount-tag">{{product.discount}}%</span>

                </div>
            </div>
            </div>`,
            providers :[CategoryService]

})
@Injectable()
export class ProductsComponent {
private product:ProductModel;
private products: ProductModel[] = [];
constructor(private _categoryService : CategoryService)
{
    this._categoryService.getProducts(0)
    .subscribe(
        a=>{
            this.products = a;
        }
    );
}
getProduct(product:ProductModel)
{
    alert(product.productId);
    this.product = product;
}
populateProducts(products: ProductModel[] = [])
{
    this.products = products;
}
 }

Basically I want to send Products from the function of getCategoryProducts of Category Component to Product Component so that I can populate the Products.

Please Help me out Thank You

Thierry Templier · Accepted Answer · 2016-07-14 20:28:02Z

1

In the main component, you could provide an instance of the product component to the categories one:

<categories [productsComponent]="productsComponent"></categories>
<products #productsComponent></products>

You need to add an input for the productsComponent field:

@Component({
  (...)
})
export class CategoriesComponent {
  getData: string;
  private categories: CategoryModel[] = [];
  private products:ProductModel[] = [];
  @Input() // <------
  private productsComponent:ProductsComponent;
  (...)
}

answered Jul 14, 2016 at 20:28

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ALI Sajjad Rizvi Over a year ago

Could you please explain a little bit more

Thierry Templier Over a year ago

Sure using the #productsComponent, you reference the products component. It's possible since you use the local variable on a component. If it was on a DOM element (for example a div one), you will get an ElementRef instance. With #smth="ngForm", you will get the directive applied to the element with the exportAs='ngForm{. This local variable can be passed to another component using its inputs with property binding. Hope it's clearer ;-)

Collectives™ on Stack Overflow

Call Other Components Function in Angular 2 using Typescript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related