Recall component on change variable Angular > 4

Question

I call the component( selector = ngx-ebar-treemo) in main component like this

<ngx-ebar-treemo *ngIf="type=='Bar' && graphic" type1="{{type1}}" type2="{{type2}}"></ngx-ebar-treemo>

i must recall him when variables type1 or type2 changes.

Thanks.

Answer 1

you can Pass data from parent to child with input binding or use a service for communication

in your child-component declare two input properties, with @Input decorators. and OnChanges() can be used for change detection of input properties

Angular provides lifecycle hooks for change detection. OnChanges is an interface and has a method declaration i.e ngOnChanges() . In parent-child component, the child component declares @Input() property to get values from parent component. Whenever parent component changes the value of properties used in child component decorated with @Input() then the method ngOnChanges() created in child component runs automatically

import {Component, OnChanges, SimpleChanges, Input} from '@angular/core';
        export class ChildComponent implements OnChanges {
        @Input() type1:any;
        @input()type2:any;

       ngOnChanges(changes: SimpleChanges) {
              for (let propName in changes) {  
                let change = changes[propName];
                 let curVal  = JSON.stringify(change.currentValue);
                 let prevVal = JSON.stringify(change.previousValue);
                  console.log(curVal);
                 console.log(prevVal);//your logic
 }
    ......
            }

In your main component

    export class MainComponent implements OnInit {
               type1:any;
               type2:any;
           yourCustomEvent()
             {//your logic to change the value
             this.type1=somevalue;
             this.type2=somevalue2;
}
                }

main.html

<ngx-ebar-treemo *ngIf="type=='Bar' && graphic" [type1]="type1" type2="type2"></ngx-ebar-treemo>

you can also use service for the communication See my post

Answer 2

Use @Input in the component. Inside the Component(ngx-ebar-treemo) use the ngOnChanges method.

ngOnChanges(change: SimpleChanges){
// your code here
}

This method will be called every time there is a change in type value.