title: Angular 4 - Push Array to Data Model in Another File
body: <p>I'm trying to make a simple app that allows you to add a server and name it and choose the type. Right now I have it working by using an array within the app component, however, while attempting to create a "server.model" file that outlines a server element and also creates the array to push the content onto, I cannot figure out how to push the data into the correct place.
  app.module.ts:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';
  
  import { AppComponent } from './app.component';
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { ElementComponent } from './element/element.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      DashboardComponent,
      ElementComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      NgbModule.forRoot(),
      AngularFontAwesomeModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.component.html:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;app-dashboard
      (serverCreated)="onServerAdded($event)"&gt;&lt;/app-dashboard&gt;
      &lt;div class="card-group"&gt;
        &lt;app-element *ngFor="let server of servers"
        [srvElement]="servers"&gt;&lt;/app-element&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Server, servers } from './server.model';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app';
    servers: Server[] = servers;
    onServerAdded(serverData: {serverName: string, serverType: string}) {
      servers.push({
        name: serverData.serverName,
        type: serverData.serverType,
        online: true
      });
    }
  }
  </code></pre>
  
  <p>server.model.ts:</p>
  
  <pre><code>export class Server {
    constructor(
      public name: string,
      public type: string,
      public online: boolean
    ) {}
  }
  export const servers: Server[] = [
    {
      name: 'web.server.com',
      type: 'server',
      online: true
    }
  ];
  </code></pre>
  
  <p>dashboard.component.html:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;form #serverForm="ngForm"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="name"&gt;Server Name&lt;/label&gt;
        &lt;input id="name" type="text" name="name" class="form-control" [(ngModel)]="newServerName"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="type"&gt;Server Type&lt;/label&gt;
        &lt;select class="form-control" id="type" name="type" [(ngModel)]="newServerType"&gt;
          &lt;option value="server"&gt;Web Server&lt;/option&gt;
          &lt;option value="database"&gt;Database&lt;/option&gt;
          &lt;option value="wordpress"&gt;Wordpress&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;button
        class="btn btn-primary"
        (click)="onAddServer(); serverForm.reset()"&gt;Add Server&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>dashboard.component.ts:</p>
  
  <pre><code>import { Component, OnInit, EventEmitter, Output } from '@angular/core';
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
  })
  export class DashboardComponent implements OnInit {
    @Output() serverCreated = new EventEmitter&lt;{serverName: string, serverType: string, serverOnline: boolean}&gt;();
    newServerName = '';
    newServerType = '';
    newServerOnline = true;
    constructor() { }
  
    ngOnInit() {
    }
    onAddServer(){
      this.serverCreated.emit({serverName: this.newServerName, serverType: this.newServerType, serverOnline: this.newServerOnline})
    }
    onPowerServer() {
  
    }
  
  }
  </code></pre>
  
  <p>element.component.html:</p>
  
  <pre><code>&lt;div class="card"&gt;
    &lt;span class="text-center mt-2"&gt;&lt;fa name="{{element.type}}" size="5x"&gt;&lt;/fa&gt;&lt;/span&gt;
    &lt;div class="card-body pt-0"&gt;
      &lt;h4 class="card-title m-0"&gt;{{ element.name }}&lt;/h4&gt;
      &lt;p class="card-text pt-0"&gt;&lt;small class="text-muted"&gt;{{ element.status}}&lt;/small&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>element.component.ts:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { Server, servers } from '../server.model';
  
  @Component({
    selector: 'app-element',
    templateUrl: './element.component.html',
    styleUrls: ['./element.component.css']
  })
  export class ElementComponent implements OnInit {
    @Input('srvElement') element: {type: string, name: string, online: boolean};
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>I think I made some progress, I believe I am now pushing the array to the the array defined in the server.model.ts, but now my:</p>
  
  <pre><code>&lt;app-element *ngFor="let server of servers"
        [srvElement]="server"&gt;&lt;/app-element&gt;
  </code></pre>
  
  <p>Is not listing the default server.</p>