title: Service data is not updating in Angular Project
body: <p>I've been working on assignment for a while but I could not update the data (Array of Users) in UsersService. I can list if I fill the User[] manually in users.service.ts but If I add new user dynamically, it returns Object Array of User. Im really confused.</p>
  
  <p>My Code:</p>
  
  <p>users.service.ts</p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { User } from "./user";
  
  @Injectable()
  
  export class UsersService {
  users: User[] = [];
  
  getUsers(status: string):Array&lt;User&gt; {
      return this.users.filter(p =&gt; p.status==status);
  }
  
  addNew(user:User) {
      this.users.push(user);
  }
  
  setUserStatus(name: string, status: string) {
      var userIndex = this.users.findIndex(p=&gt;p.name==name);
      this.users[userIndex].status = status;
  }
  }
  </code></pre>
  
  <p>active-users.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { UsersService } from '../shared/users.service';
  import { User } from '../shared/user';
  
  @Component({
    selector: 'app-active-users',
    templateUrl: './active-users.component.html',
    styleUrls: ['./active-users.component.css'],
    providers: [UsersService]
  })
  export class ActiveUsersComponent implements OnInit {
  
    activeUsers : User[];
  
    constructor(private _userService: UsersService) { }
  
    ngOnInit() {
      this.activeUsers = this._userService.getUsers('active');
    }
  
    setStatus(name: string, status: string) {
      this._userService.setUserStatus(name, status);
    }
  
  }
  </code></pre>
  
  <p>inactive-users.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { UsersService } from '../shared/users.service';
  import { User } from '../shared/user';
  
  @Component({
    selector: 'app-inactive-users',
    templateUrl: './inactive-users.component.html',
    styleUrls: ['./inactive-users.component.css'],
    providers: [UsersService]
  })
  export class InactiveUsersComponent implements OnInit {
  
    inactiveUsers: User[];
  
    constructor(private _userService: UsersService) { }
  
    ngOnInit() {
      this.inactiveUsers= this._userService.getUsers('inactive');
    }
  
    setStatus(name: string, status: string) {
      this._userService.setUserStatus(name, status);
    }
  
  }
  </code></pre>
  
  <p>and there is html files to list service data.
  You can also browse my project in github .
  <a href="https://github.com/bayramorhan/angulardemo/tree/service-assignment/src/app" rel="nofollow noreferrer">https://github.com/bayramorhan/angulardemo/tree/service-assignment/src/app</a></p>
  
  <p>Template Files</p>
  
  <p>inactive-users.component.html</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;Inactive Users&lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item" *ngFor="let user of inactiveUsers"&gt;&lt;i class="glyphicon glyphicon-user text-danger"&gt;&lt;/i&gt; {{ user.name | uppercase }} &lt;button class="btn btn-xs pull-right btn-primary" (click)="setStatus(user.name,'active')"&gt;Set to Active&lt;/button&gt;&lt;/li&gt;
            &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>active-users.component.html</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;Active Users&lt;/div&gt;
    &lt;div class="panel-body"&gt;
        &lt;ul class="list-group"&gt;
            &lt;li class="list-group-item" *ngFor="let user of activeUsers"&gt;&lt;i class="glyphicon glyphicon-user text-success"&gt;&lt;/i&gt; {{ user.name | uppercase }} &lt;button class="btn btn-xs pull-right btn-primary" (click)="setStatus(user.name, 'active')"&gt;Set to Inactive&lt;/button&gt;&lt;/li&gt;
          &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you.</p>