title: Angular 5 element added to array gets deleted somehow
body: <p>I have a competition manager application and when a competition is created it is added to a mockdata array. It does add it to the array but when I try to view the competition is somehow gets deleted.</p>
  
  <p>Code for creating a competition in the component:</p>
  
  <pre><code>const competition = new Competition();
  competition.id = COMPETITIONS.length;
  competition.name = this.competition_name;
  competition.users = this.userArr;
  
  this.competitionService.createCompetition(competition).subscribe(data =&gt; {
      this.router.navigate(['/competition/index']);
  });
  </code></pre>
  
  <p>Code in the service to get and create competition:</p>
  
  <pre><code>getCompetition(id: number): Observable&lt;Competition&gt; {
      return of(COMPETITIONS.find(competition =&gt; Number(competition.id) === Number(id)));
  }
  
  createCompetition(competition): Observable&lt;number&gt; {
      return of(COMPETITIONS.push(competition));
  }
  </code></pre>
  
  <p>Code to view a specific competition:</p>
  
  <pre><code>this.competitionService.getCompetition(route.snapshot.params.id).subscribe(data =&gt; {
      if (data) {
          this.competition = data;
      } else {
          router.navigate(['/competition/index']);
      }
  });
  </code></pre>
  
  <p>Competition mockdata:</p>
  
  <pre><code>import {Competition} from '../classes/competition';
  import {USERS} from './mock-users';
  
  export const COMPETITIONS: Competition[] = [
    {id: 0, name: 'Testje Compie', users: [USERS[0], USERS[3]]}
  ];
  </code></pre>