Communicating from one component to another Angular 5

Question

I have two components a navigation component and a detail component. In my navigation component I have a few options or items the user can select. When a user selects one I am trying to update a masonry grid in the detail. I am able to update the masonry grid but I need to call a method prepended(). For example:

Code in detail component:

  import Masonry from 'masonry-layout';

  // on ngOnInit
  let grid = document.querySelector('.grid');

  let msnry = new Masonry( grid, {
    itemSelector: '.grid-item',
  });

I need to call the following from my naviagtion component:

msnry.prepended();

How do I call msnry.prepended() from another component? Any assistance would be greatly appreciated.

Answer 1

If they have a parent child relationship then you can use the template reference variable technique to call a method of the child component from the parent component. For example, assume the following div is you navigation component template,

<div>
    <detail-component #detailComponent></detail-component>
    <button (click)="detailComponent.sayHello()"/>
</div>

Considering your detail component has a method named sayHello() . The button on the navigation component will call that method when clicked.

Hope it helps.