Learn Angular 8 & Web API by creating a Full Stack Web App

Install Visual Studio 2019 community edition, choose desktop development workloads, then create and run a Hello World console app to verify the setup.

Create the application database in ms sql server using two methods: object explorer (new database) and a query (create database), then execute and refresh to verify.

Create a department table in MS SQL with an identity column and a department name, then insert sample data and verify with a select query.

Create an employee table in ms sql with an identity id and columns for name, department, mail, and joining date; insert records and verify with select queries.

Create a Web API project in Visual Studio 2019, using the API template and values controller, run the app, and call /api/values to receive value1 and value2.

Learn how to force a Web API to return json only by configuring media types, headers, and by returning a data table as json in a full stack app.

Install postman client to test get, post, put, and delete API methods beyond browser limitations; follow download, install, and launch steps, then send requests and view responses.

Create two model classes, department and employee, in the models folder, defining department id and department name, employee name and department, and a date of joining.

Create department and employee controllers from scratch, each offering get, put, post, and delete methods to manage their respective tables.

Implement GET methods for department and employee tables in a Web API, using stored procedures, web.config connection string, configuration manager, and data adapters to return results.

Learn to implement a post method in a web api to insert departments and employees using insert queries, with try-catch handling and postman testing.

Implement the put method in the Web API to update department and employee records by adapting the post method’s logic, and verify updates with Postman showing updated successfully.

Implement a delete method in the web API by duplicating the put logic for department and employee controllers, deleting by id and returning deletion status, tested via api/department/{id} and api/employee/{id}.

Download and install Node.js on Windows 64-bit, run as administrator with default options, then verify the installation by checking the Node.js version in the command prompt.

Install Visual Studio Code on Windows by downloading the 64-bit system installer, running as administrator, and creating a desktop icon. The lightweight, open-source code editor is now ready to use.

Install the Angular CLI globally with npm install -g @angular/cli, verify the version to confirm Angular 8, then you can start creating Angular projects.

Create an angular 8 project with ng new, enable routing, and set up an app built with components and selectors, including employee and department components, then run ng serve --open.

Install Bootstrap into your Angular project to style the app, include the Bootstrap CSS in the head, place the JS before the closing body tag, and test a Bootstrap button.

Install angular material for the project, run npm install angular material and angular animations, import browser animations module, apply the default theme, and enable material icons.

Discover how Angular components organize an app into employee and department, with show, edit, and add features, and learn to structure folders and generate components.

builds a bootstrap navigation menu in an angular 8 and web api full-stack app to toggle between department and employee components with on-click events and conditional display via component selectors.

Define department and employee models in Angular, export the classes, and implement department and employee services to consume the application programming interface methods, then register the services in the app module.

Build a material design table in an angular 8 app to display department details with edit and delete actions, using mat-table, data source, and a dynamic list refresh.

Consume the get method to fetch department details in an Angular 8 full stack app, wiring the department service to call /api/department and render results.

Learn to enable and configure cors for Angular 8 apps by whitelisting origins, so your Web API is securely consumable and protected.

Learn to add sorting to an Angular Material table by configuring MatSort with @ViewChild(MatSort), enabling sort headers on department and department name, and importing MatSortModule.

Implement a dynamic table filter by typing in a material-style text box; on each key up, apply filter to the list data in lowercase for instant results.

Open a material design dialog on the add department button click, display a form to submit a new department name, and insert it into the department table.

Add department details using Angular 8 form fields, ngForm and the forms module, validating department name and posting to a service to insert into the database.

Learn how to post department details from an Angular 8 app to a Web API, insert the department name into the database, and handle responses with alerts.

Learn to refresh a department grid automatically when a modal window closes by using an RxJS subject to trigger a grid refresh in an Angular 8 web app.

Implement a material design snack bar in an Angular app to replace alert boxes, display auto-dismissing notifications at the top, and configure duration and actions.

Delete a department record in Angular by calling the delete API from the department service after a confirmation popup, then refresh the list and show a snackbar notification.

Update a department using a put API call in angular through a dialog modal; the department service sends the edited object to the /department endpoint and confirms with a snackbar.

Learn to show employee details by consuming the get method and displaying them in a material table, replicating department logic for an employee service, model, and component.

Implement the add employee component by duplicating the department form, wiring the employee service and department service, and resetting fields like id, name, department, and joining date.

Learn to implement a department dropdown and a date picker in an Angular 8 form by fetching dropdown values from an API and binding them to a Material select.

Implement delete and update workflows for employee records in an Angular 8 app, including extracting the date part from date-time values and dynamic department dropdowns.

Implement routing in the Angular 8 app by defining routes for department and employee, wiring router links and a router outlet to render the corresponding components.