Angular + Typescript Demo Plunk

<!DOCTYPE html>
<html>

  <head>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="src/main.js"></script>
  </head>

  <body>
    <my-app>
      loading...
    </my-app>
  </body>

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js';
import 'zone.js/dist/long-stack-trace-zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.js';

platformBrowserDynamic().bootstrapModule(AppModule);

{
  "name": "server-list",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "angular-font-awesome": "^3.1.2",
    "angularfire2": "^5.0.1",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "firebase": "^5.4.2",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "rxjs": "^6.3.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { environment } from './../environments/environment';
import { ServerInfoComponent } from './server-info/server-info.component';
import { AppRoutingModule } from './app-routing.module';
import { AllServersComponent } from './all-servers/all-servers.component';
import { DataService } from './shared/db.service';

@NgModule({
  declarations: [
    AppComponent,
    ServerInfoComponent,
    AllServersComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFontAwesomeModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ServerInfoComponent } from './server-info/server-info.component';
import { AllServersComponent } from './all-servers/all-servers.component';


const routes: Routes = [
	{path: '', component: AllServersComponent},
	{path: 'server-info/:id', component: ServerInfoComponent}
	//{path: 'server-info', component: ServerInfoComponent}
];

@NgModule({
	imports: [RouterModule.forRoot(routes)],
	exports: [RouterModule]
})
export class AppRoutingModule {}

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

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

<div>
	<h1 class="text-center title-app">Test App</h1>
</div>

<router-outlet></router-outlet>

<div class="container-fluid">
  <table class="table table-striped">
    <thead class="thead-dark">
      <tr class="text-center">
        <th>ID</th>
        <th>Main IP</th>
        <th>Provider</th>
        <th>Company</th>
        <th>Options</th>
      </tr>
    </thead>
    <tr *ngFor="let server of servers | async; let i = index">
      <td class="text-center">{{ i + 1 }}</td>
      <td>{{ server.mainip }}</td>
      <td class="text-center">{{ server.provider }}</td>
      <td class="text-center">{{ server.company }}</td>
      <td class="options-icons text-center">
        <a class="delete" (click)="editServer()"><fa name="trash"></fa></a>
        <a class="edit" [routerLink]="['/server-info', i + 1]"><fa name="edit"></fa></a>
      </td>
    </tr>
  </table>
</div>

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Observable } from 'rxjs';

import { DataService } from '../shared/db.service';

@Component({
  selector: 'app-all-servers',
  templateUrl: './all-servers.component.html',
  styleUrls: ['./all-servers.component.css'],
  providers: [DataService]
})
export class AllServersComponent implements OnInit {

  servers: Observable<any[]>;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.servers = this.getAllServers('/Servers');
  }

  getAllServers(path) {
    return this.dataService.getAllServers(path);
  }
}

<div class="container">
	<p>
	  	Server IP - {{ currentServer.mainip }}
	</p>
</div>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import * as firebase from "firebase";

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

  id: string;
  currentServer: any;

  constructor(private route: ActivatedRoute) {}

  getServerInfo() {
    firebase.database().ref('Servers/' + this.id).on('value', snap => {
      this.currentServer = snap.val();
    });
  }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    this.getServerInfo();
  }

}

export class Provider {
	constructor(
		public name: string,
		public site: string,
		public email: string[]
	) {}
}

export class Server {
	constructor(
		public mainip: string,
		public provider: string,
		public company: string
	) {}
}

import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

import { Server } from './models/server.model';
import { Provider } from './models/provider.model';

@Injectable()
export class DataService {
	
	public servers: Observable<any[]>;
	public provider: Provider[];

	constructor(private db: AngularFireDatabase) {}

	getAllServers(path): Observable<any[]> {
		this.servers = this.db.list(path).valueChanges();
		return this.servers;
	}
}

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false,
  firebase: {
  	apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  }
};

/*
 * In development mode, to ignore zone related error stack frames such as
 * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
 * import the following file, but please comment it out in production mode
 * because it will have performance impact when throw error
 */
// import 'zone.js/dist/zone-error';  // Included with Angular CLI.