Angular object change detection

Question

I have a third-party angular component, which is a table displaying user data. If the transferred object to the table changes, the table is updated.

How does angular detect object changes? I have the following example:

user.component.ts:

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css'],
})
export class UserComponent implements OnInit {

  private _users: User[];
  set users(users: User[]) {
    this._users = users;
  }

  get users(): User[] {
    return this._users;
  }

  constructor() {}

  addUserToTheList(user: User) {

    // this won't be detected as a change to the object
    this.users.push(user);

    // on the other hand, this will
    let userList: User[] = this.users;
    userList.push(user);
    this.users = userList;

  }
}

Does this mean that I have to completely replace the object in order to cause change detection, or somehow I did not completely miss the point? Or it could be a problem for a third-party library (which Clarity Design System)

Answer 1

The table component used is likely to implement ChangeDetectionStrategy.OnPush.

, ( , ), , .

, : https://angular-2-training-book.rangle.io/handout/change-detection/change_detection_strategy_onpush.html

Answer 2

. , ref   ( ) .