Angular Component won't change after changes happened on services

Question

I have an assignment in angular but everytime i change an element value it wont change on the browser but i know it was already changed because of the console log. The assignment is like to toggle an the status of a member from active to inactive vice versa. it was changed but the browser keep showing the same thing.

inactive and active member have their own component.

users.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UsersService {
  Users = [
    {name: 'Anna', active: true},
    {name: 'Joey', active: false},
    {name: 'Bords', active: true},
    {name: 'Rhea', active: false},
    {name: 'Glenn', active: true}
  ]

  constructor() { }

  changeStatus(id: number){
    console.log(this.Users[id])
    this.Users[id].active = !this.Users[id].active
    console.log(this.Users[id])
  }
}

Active-user component

TS file

import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { UsersService } from '../users.service';

@Component({
  selector: 'app-active-users',
  templateUrl: './active-users.component.html',
  styleUrls: ['./active-users.component.css']
})
export class ActiveUsersComponent implements OnInit{
  @Input() ActiveUsers = [];

  constructor(private usersService: UsersService){}

  ngOnInit(){
    this.usersService.Users.forEach((value, index) => {
      if(value.active){
        this.ActiveUsers.push({id: index, name: value.name})
      }
    })
  }

  changeStatus(id: number) {
    this.usersService.changeStatus(id);
  }
}

HTML

<h3>Active Users</h3>
<ul class="list-group">
  <li
    class="list-group-item"
    *ngFor="let user of ActiveUsers">
    {{ user.name }} | <a href="#" (click)="changeStatus(user.id)">Set to Active</a>
  </li>
</ul>

InActive Component

TS file

import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { UsersService } from '../users.service';

@Component({
  selector: 'app-inactive-users',
  templateUrl: './inactive-users.component.html',
  styleUrls: ['./inactive-users.component.css']
})
export class InactiveUsersComponent implements OnInit{
  @Input() inActiveUsers = [];
  constructor(private usersService: UsersService){}

  ngOnInit(){
    this.usersService.Users.forEach((value, index) => {
      if(!value.active){
        this.inActiveUsers.push({id: index, name: value.name})
      }
    })
  }

  changeStatus(id: number) {
    this.usersService.changeStatus(id);
  }
}

HTML file

<h3>Inactive Users</h3>
<ul class="list-group">
  <li
    class="list-group-item"
    *ngFor="let user of inActiveUsers">
    {{ user.name }} | <a href="#" (click)="changeStatus(user.id)">Set to Active</a>
  </li>
</ul>

App Component

TS file

import { Component} from '@angular/core';
import { UsersService } from './users.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [UsersService],
})
export class AppComponent{
  
}

HTML file

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-8 col-md-offset-2">
      <app-active-users></app-active-users>
      <app-inactive-users></app-inactive-users>
    </div>
  </div>
</div>

Answer 1

To make it reactive, you can do something like this:

1. Service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from ‘rxjs’;


@Injectable({
  providedIn: 'root'
})
export class UsersService {
  Users = new BehaviorSubject([
    {name: 'Anna', active: true},
    {name: 'Joey', active: false},
    {name: 'Bords', active: true},
    {name: 'Rhea', active: false},
    {name: 'Glenn', active: true}
  ]);

  constructor() { }

  changeStatus(id: number){
    const users = this.Users.getValue();
    users[id].active = !users[id].active;
    this.Users.next(users);
  }
}

2. inactive.component.ts ( ngOnInit code )

this.usersService.Users.subscribe(users => {
    users.forEach((value, index) => {
         if(!value.active) { 
            this.inActiveUsers.push({id: index, name: value.name})
         }
    });
})

3. active.component.ts

this.usersService.Users.subscribe(users => {
    users.forEach((value, index) => {
         if(value.active) { 
            this.ActiveUsers.push({id: index, name: value.name})
         }
    });
})