How to detect change in Angular signal input function?

Question

I have a component that takes two inputs, user and userList I wonder should i detect the change with the ngOnChanges lifecycle hook? What's the best practice for that?

  // Note: Old approach
  // @Input() user: User; // For editing a user
  // @Input({ alias: "userList" }) _userList: User[] = [];
  // @Output() addUser = new EventEmitter<User>();

  // Note: New approach
  user = input<User>();
  _userList = input<User[]>([], { alias: "userList" });
  addUser = output<User>();

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.getRoleList();
  }

  ngOnChanges(changes: SimpleChanges): void {
    const { user, _userList } = changes;
    console.log(changes);

    if (user && user.currentValue) {
      this.userModel = user.currentValue;
      this.initializeForm(user.currentValue);
    }

    if (_userList) {
      this.userList.set(_userList.currentValue);
    }
  }

I tried the ngOnChanges lifecycle hook and it works fine but I don't know if it's ok or not for my signal-based component.

Answer 1

The new signal inputs defined by signal() or signal.required() return signals.

As any other signal you can use effect() to track and subscribe to changes that may happen.

effect(() => {
  console.log(this.user);
  // will be call when `this.user` changes
})

There is also another alternative that is RxJS based. Angular provides an interop to convert signals to observables via the toObservable() function.

toObservable(this.user).subscribe((newUser) => /* when user changes */);