angular 5 course 1st 2 sections have been completed

.angular-cli.json

@@ -19,6 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
+        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
         "styles.css"
       ],
       "scripts": [],

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",
+    "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.2",
     "zone.js": "^0.8.14"

src/app/app.component.html

@@ -1,8 +1,10 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
+  <input type="text" [(ngModel)] = "title">
   <h1>
     Welcome to {{title}}!
   </h1>
+  <app-servers></app-servers>
   <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
 <h2>Here are some links to help you start: </h2>

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  title = 'angular 5';
 }

src/app/app.module.ts

@@ -1,16 +1,21 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { FormsModule} from '@angular/forms';
 
 import { AppComponent } from './app.component';
+import { ServerComponent } from './server/server.component';
+import { ServersComponent } from './servers/servers.component';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    ServerComponent,
+    ServersComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/server/server.component.html

@@ -0,0 +1,3 @@
+Server Component it is!
+<div>The Server with id {{serverId}} is currently {{getServerStatus()}}</div>
+

src/app/server/server.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-server',
+  templateUrl: './server.component.html'
+})
+export class ServerComponent {
+ serverId: number  = 10;
+ serverStatus: string = "inactive";
+
+ getServerStatus(){
+   return this.serverStatus;
+ }
+}

src/app/servers/servers.component.html

@@ -0,0 +1,10 @@
+
+<button class="btn btn-primary" [disabled] = "!allowNewServer" (click) = "setServerStatus()">Add Server</button>
+<p [innerText] = "!allowNewServer"> </p>
+<div>{{serverCreationStatus}}</div>
+
+<input type="text" class="form-control" [(ngModel)] = "serverName">
+<input type="text" class="form-control" (input) = "onUpdateServerName($event)">
+<p>{{serverName}}</p>
+<app-server></app-server>
+<app-server></app-server>

src/app/servers/servers.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-servers',
+  templateUrl: './servers.component.html',
+  styleUrls: ['./servers.component.css']
+})
+export class ServersComponent implements OnInit {
+  allowNewServer = false;
+  serverCreationStatus = "server was not created";
+  serverName = "";
+  constructor() {
+    setTimeout(() => {this.allowNewServer = true; }, 2000);
+  }
+
+  ngOnInit() {
+  }
+
+  setServerStatus(){
+    this.serverCreationStatus = "server was just created";
+  }
+
+  onUpdateServerName(event: Event){
+    this.serverName = (<HTMLInputElement>event.target).value;
+  }
+}