AndrewJBateman / angular-tutorial-app

:clipboard: Simple app to display a list of servers and indicate whether the server is on or offline. Created as part of Udemy Angular course.

⚡ Angular Tutorial App

• 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

📄 Table of contents

• ⚡ Angular Tutorial App
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• This course project is to help learn about basic Angular concepts, including using components, data & property binding, the formsmodule etc.

📷 Screenshots

.

📶 Technologies

• 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.

💾 Setup

• Install dependencies by running npm i
• Run ng serve for a dev server. Navigate to http://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 the dist/ directory. Use the --prod flag for a production build

💻 Code Examples

• 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';
  }
}

🆒 Features

• 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 & To-Do List

• Status: Working.
• To-Do: Nothing

👏 Inspiration

• All code is from Maximilian Schwarzmüller's Angular course - now 2022 edition

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [e-mail]