How to detect change in Angular signal input function?

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.

Continue reading...