From 6ddc8bca3b214548999ea72ce74ac94f9ed7184b Mon Sep 17 00:00:00 2001 From: Naga krishna sumanth kovvuri Date: Sun, 18 Feb 2018 18:20:29 -0500 Subject: [PATCH] angular 5 course 1st 2 sections have been completed --- .angular-cli.json | 1 + package-lock.json | 5 +++++ package.json | 1 + src/app/app.component.html | 2 ++ src/app/app.component.ts | 2 +- src/app/app.module.ts | 11 ++++++++--- src/app/server/server.component.html | 3 +++ src/app/server/server.component.ts | 14 ++++++++++++++ src/app/servers/servers.component.css | 0 src/app/servers/servers.component.html | 10 ++++++++++ src/app/servers/servers.component.ts | 26 ++++++++++++++++++++++++++ 11 files changed, 71 insertions(+), 4 deletions(-) create mode 100644 src/app/server/server.component.html create mode 100644 src/app/server/server.component.ts create mode 100644 src/app/servers/servers.component.css create mode 100644 src/app/servers/servers.component.html create mode 100644 src/app/servers/servers.component.ts diff --git a/.angular-cli.json b/.angular-cli.json index eb6ae52..c2eaea0 100644 --- a/.angular-cli.json +++ b/.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": [], diff --git a/package-lock.json b/package-lock.json index aec39ea..5aa2f89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -893,6 +893,11 @@ "hoek": "2.16.3" } }, + "bootstrap": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz", + "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E=" + }, "brace-expansion": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz", diff --git a/package.json b/package.json index 112d2e2..96e0033 100644 --- a/package.json +++ b/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" diff --git a/src/app/app.component.html b/src/app/app.component.html index 46d517b..7b283a4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,8 +1,10 @@
+

Welcome to {{title}}!

+

Here are some links to help you start:

diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7b0f672..d009199 100644 --- a/src/app/app.component.ts +++ b/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'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 926975a..75535ec 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/server/server.component.html b/src/app/server/server.component.html new file mode 100644 index 0000000..b14633a --- /dev/null +++ b/src/app/server/server.component.html @@ -0,0 +1,3 @@ +Server Component it is! +
The Server with id {{serverId}} is currently {{getServerStatus()}}
+ diff --git a/src/app/server/server.component.ts b/src/app/server/server.component.ts new file mode 100644 index 0000000..7a128d1 --- /dev/null +++ b/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; + } +} diff --git a/src/app/servers/servers.component.css b/src/app/servers/servers.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/servers/servers.component.html b/src/app/servers/servers.component.html new file mode 100644 index 0000000..b7b72f0 --- /dev/null +++ b/src/app/servers/servers.component.html @@ -0,0 +1,10 @@ + + +

+
{{serverCreationStatus}}
+ + + +

{{serverName}}

+ + diff --git a/src/app/servers/servers.component.ts b/src/app/servers/servers.component.ts new file mode 100644 index 0000000..e3651d0 --- /dev/null +++ b/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 = (event.target).value; + } +}