Triggering Events in a Child Component in Angular

Interactions between components has been more and more of a necessity.  In a component, we can easily bind functions and even send data back to the parent within this function (https://morrisdev.com/2016/08/angular-components-with-bound-functions-using-typescript/)However, triggering an event in the child by the parent is a big more convoluted.

 

You can see several options here http://stackoverflow.com/questions/37439300/communicating-events-from-parent-to-child-in-angularjs-components and they are all pretty convoluted.

The EASIEST way is not listed.  Essentially, all you need to do is have the child component wait for you to tell it what to do.  Components have a built in “$onChanges()” event that tracks the changes to a bound parameter (only a value, not an object with values changing within it).

So, if you have:

then your component can have a script like this:

public command:string;
public settings:any;

----  class object, constructor, etc... here   ----

$onChanges() {
            if(this.command=='refresh some data'){this.refreshData()}
            if(this.command=='DeleteRecord'){let id=this.settings.id;this.deleteRecord(id);}
            // and so forth  
        }

where your component declaration:

  app.component("mycomponent",
        {
            bindings: {
                settings: '<', command: '<'
            },
            templateUrl: 'yourtemplate.html,
            controller: ThisClassObject,
            controllerAs: 'vm'
        });
}

Basically, it's a "watch" and you can send it whatever you want. Rather than mess around trying to open links between states, just handle the events like this.

REMEMBER: It ONLY works with one-way binding, "<" not "=".