- A simple Angular app to display a list of servers and indicate whether the server is on or offline.
- Server names can be added to the list.
- Note: to open web links in a new window use: ctrl+click on link
- This course project is to help learn about basic Angular concepts, including using components, data & property binding, the formsmodule etc.
- Angular v13
- RxJS Library v6 used to handle datastreams and propagation of change using observables.
- Angular Augury Chrome Extension v1.23.0 used for debugging.
- Install dependencies by running
npm i
- Run
ng serve
for a dev server. Navigate tohttp://localhost:4200/
. The app will automatically reload if you change any of the source files - Run
ng build
to build the project. The build artifacts will be stored in thedist/
directory. Use the--prod
flag for a production build
- server component with functions used to generate html template data.
import { Component } from '@angular/core';
@Component({
selector: 'app-server',
templateUrl: './server.component.html',
styles: [`
.online {
color: white;
}
`]
})
export class ServerComponent {
serverId = 10;
serverStatus = 'offline';
// use a random number generator function to get a random status of on or offline
constructor() {
this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline';
}
// function to return the random server status
getServerStatus() {
return this.serverStatus;
}
// function to show online status with a green background and offline with red.
getColor() {
return this.serverStatus === 'online' ? 'green' : 'red';
}
}
- Server names can be added via a form-control input field.
- The background color of each server in the list changes depending on the online status of the server.
- Status: Working.
- To-Do: Nothing
- All code is from Maximilian Schwarzmüller's Angular course - now 2022 edition
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@yahoo.com