Angular: get changes from input()

Question

I have a component named ftn-popin-opener

<label>{{ selectedValue }}</label>

where selectedValue is an Input()

@Input() selectedValue: string;

Inside another component where I use the ftn-popin-opener, I would like to detect every time when the Input() selectedValue changes:

<ftn-popin-opener
   [selectedValue]='professionalSituation | titlecase'>
</ftn-popin-opener> 

I tried with ngOnChanges() but does not work

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

Answer 1

You have to use ngOnChanges life cycle method in the component where there is @Input, in your case you have to use it in popin-opener component

Answer 2

I am not sure how professionalSituation is handle in your parent component, but, what you could do in your ftn-popin-opener component is having an @Input setter like this:

export class FtnPopinOpenerComponent {
  myValue!: string;
 
  @Input() set selectedValue(value: string) {
     this.myValue = value;
  }
}

In your template HTML:

<label>{{ myValue }}</label>