setter and getter for Angular

Question

In angular, there is a built in action dialog framework which I've to use to display the action pop up window when showDialog = true.

The action dialog will be shown when showDialog=true, else the action dialog will hide when showDialog=false

Have to use the setter and getter method to call cancel method when showDialog = false.

However when debugging the code, it keeps on checking the getter and setter method even though I've not trigger the action dialog.

Is there a way that I could use lifecycle method in Angular to compare the previous value and current boolean value of showDialog. Example: if previousValue.showDialog != currentValue.showDialog, then only call get showDialog(), set showDialog(), and cancel().

i was thinking of using some lifecycle method in Angular like ngAfterViewInit(). Do you know how do I store previous boolean val of showDialog, so that I can compare to the current val of showDialog.

In React, I could use getDerivedStateFromProps which has the prev props value but do you know if there is similar method in Angular.

a.html

   <action-dialog [(openDialog)]="showDialog"/>

b.html

      <button (click)="showDialog = true">
                    {{intl.cleanNow | uppercase}}
      </button>

a.ts

  get showDialog() {
      return this._showDialog;
   }

  set showDialog(val){
    if (val === false) {
        this.cancel();
    } else if (val === true) {
        this._showDialog = true;
    }
}

 cancel() { 
    this.showDialog = false;
    this.form.reset({
        throttle: this._originalThrottle || 50
    });
}

score 0 · Answer 1 · answered Jun 25 '19 at 21:40

0

You can use the ngOnChanges life cycle hook. This life cycle hook gets an variable of type simpleChanges and one of it value is previous value.

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit, OnChanges {
  @Input() test: string;
  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }

  ngOnInit() { }
}

This is how you call this component from parent component:

<app-test [test]="'2'"></app-test>

This will be the console:

test: SimpleChange, currentValue: "2", firstChange: true, previousValue: undefined

So you can know the current value, the previous value and even if this was the first change or not

answered Jun 25 '19 at 21:40

Udi Mazor

1,646
2
15
30

Thanks but ngOnChanges only call once when component is loaded for the first time. In the above scenario, is there a way that the code could detect the changes after the component has loaded and when user click on the cleanNow button, it'll check the previous val vs current val. – noob Jun 25 '19 at 21:59
No my friend. ngOnChanges will fire every time an input parameter in your component is changed and not only for the first time. This is why it has a "previousValue" property. – Udi Mazor Jun 25 '19 at 22:05
Thanks for your suggestion, I tried it doesn't work because the is in the child.html and the getter/setter method is also defined in the child.ts. Maybe I can use ngDoCheck()? – noob Jun 26 '19 at 19:20
Do not use ngDoCheck. Its purpose is to spread the change detection from one component to another. You don't want code there because you want to chane detection to be as fast as possible. I couldnt see why it shouldnt work. Can you create a stackblitz of your problem? – Udi Mazor Jun 26 '19 at 19:34

setter and getter for Angular

1 Answers1