stencil change @Prop() detection

Question

How can I detect prop changes in stencil, in angular is something like this:

But I don't know how is in stencil.

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'my-name',
  template: `
      <h2>First name: {{name}} ({{_name}})</h2>
  `,
})
export class ChildComponent implements OnInit {
  private _name: string;
  constructor() {}

  get name(): string {
    // transform value for display
    return this._name.toUpperCase();
  }

  @Input()
  set name(name: string) {
    console.log('prev value: ', this._name);
    console.log('got name: ', name);
    this._name = name;
  }

  ngOnInit() {
    console.log('on init');
    console.log(this._name);
  }
}

I need to detect properties changes

Answer 1

You can use the @Watch decorator on a method that will trigger when the property changed.

@Watch('name') 
onNameChanged(newValue: string, oldValue: string) {
  this._name = newValue;
}

Note on @Watch: this decorator only trigger on prop changed, it means the onNameChanged() method won't be called the first time that prop is set. In order to intercept the first set, you have to use the componentWillLoad() hook.

componentWillLoad(){
  this.onNameChanged(this.name);
}

Working example:

import { Component, Prop, Watch } from '@stencil/core';

@Component({
  tag: 'my-name'
})
export class ChildComponent {

  private _name: string;

  @Prop() name: string = '';

  @Watch('name')
  onNameChanged(name: string) {
    console.log('prev value: ', this._name);
    console.log('got name: ', name);
    this._name = name.toUpperCase();
  }

  componentWillLoad(){
    this.onNameChanged(this.name);
  }

  render() {
    return (<h2>First name: {this.name} ({this._name})</h2>);
  }
}