The tutorial provides a comprehensive guide to building a full-stack web application using Angular 17 and .NET Core. It focuses on implementing CRUD (Create, Read, Update, Delete) operations for inventory and customer management. The tutorial demonstrates integrating Bootstrap for styling and utilizes SQL Server for data persistence. Key concepts covered include routing, data binding, HTTP requests, and the use of stored procedures. The explanation offers step-by-step instructions, from setting up the Angular components to creating the .NET Core API and interacting with the database, including UI enhancements for an improved user experience. The final implementation focuses on achieving real time updates for data being shown in the UI.

Angular 17 & .NET Core Full Stack Application Study Guide

Quiz

What are the two prerequisites needed to begin building an Angular application according to the video?
Explain what the command npm install -g @angular/cli does and why it’s important.
When creating a new Angular application using the command ng new [application-name], what is the first question asked and why is this relevant to web development?
What is the command code . used for in the context of this tutorial?
Describe the significance of the src folder in an Angular application, particularly mentioning the index.html and app folders.
What does the command ng serve do, and what benefit does it provide during development?
Explain how bootstrap can be integrated into an angular app.
Explain how the NG generate component command can add to the folder structure of an app.
Explain how routing works in an angular app.
Explain how to submit data from an Angular app to a .NET Core API.

Quiz – Answer Key

The two prerequisites are Node.js, which can be downloaded from nodejs.org, and Visual Studio Code, which can be downloaded from the Visual Studio Code website; these tools are required for running and developing Angular applications.
The command npm install -g @angular/cli installs the Angular CLI (Command Line Interface) globally on the system; this allows you to use Angular commands like ng new to create and manage Angular projects.
The first question asked is which stylesheet format you want to use (e.g., CSS, Sass); this is important because it determines how you’ll style your Angular application.
The command code . opens Visual Studio Code from the command prompt, automatically loading the current directory (the Angular application folder) into the editor.
The src folder contains the source code of the Angular application; index.html is the top-level HTML file, and the app folder contains the components and logic for the application, the code actually displayed.
The command ng serve builds the Angular application and starts a development server, automatically reloading the browser whenever changes are made to the code.
Bootstrap is installed through the command npm install bootstrap –save. The Javascript and CSS files of bootstrap are integrated into the angular.js file.
The command NG generate component [path]/[component name] creates a new folder within the folder designated by the path variable, and then adds a folder with all of the component files into this folder.
Routing allows for traversing to particular pages without reloading the entire application, keeping the main template intact; it requires defining routes in app.routes.ts and using routerLink in HTML templates.
Data is submitted from an Angular app to a .NET Core API using the HttpClient module; this involves creating a data structure, defining the API URL, and using the post method to send the data, subscribing to the result to handle the response.

Essay Questions

Describe the process of setting up a full-stack application using Angular 17 for the front end and .NET Core for the back end, including installation of prerequisites, project creation, and initial configuration. Explain common problems and what to do when errors occur.
Explain the significance of components and routing in Angular applications, detailing how they contribute to creating a modular and navigable user interface.
Outline the steps involved in integrating Bootstrap into an Angular application and utilizing its CSS classes to style the user interface, focusing on the benefits of using a CSS framework.
Discuss the implementation of CRUD (Create, Read, Update, Delete) operations in an Angular application, covering the front-end logic, back-end API calls, and database interactions.
Compare and contrast the different approaches used for creating and managing dialog boxes in the Angular application described in the tutorial, highlighting the advantages and disadvantages of each method.

Glossary of Key Terms

Angular CLI: A command-line tool for creating, managing, and building Angular applications.
Node.js: A JavaScript runtime environment that allows you to run JavaScript on the server-side.
npm (Node Package Manager): A package manager for JavaScript that is used to install and manage dependencies for Node.js projects.
Component: A reusable building block of an Angular application that encapsulates HTML, CSS, and TypeScript code.
Routing: A mechanism for navigating between different views or pages in an Angular application without reloading the entire page.
Bootstrap: A popular CSS framework that provides pre-built styles and components for creating responsive and visually appealing user interfaces.
.NET Core: A cross-platform, open-source framework for building modern web applications and APIs.
API (Application Programming Interface): A set of rules and specifications that allows different software systems to communicate with each other.
CRUD Operations: The four basic operations performed on data: Create, Read, Update, and Delete.
Model: A class that defines the structure and behavior of data in an application.
Data Binding: The process of connecting data between the component class and the HTML template in an Angular application.
Two-Way Binding: An ability to have data flow two ways, from HTML to the component code, or from the component code to the HTML.
HttpClient: An Angular module that allows you to make HTTP requests to a server to retrieve or send data.
JSON (JavaScript Object Notation): A lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate.
Dependency Injection: A design pattern in which objects receive other objects that they depend on (dependencies) instead of creating them themselves.
Intellisense: A code completion feature in IDEs like Visual Studio Code that provides suggestions and assistance while coding.
TypeScript: A superset of JavaScript that adds optional static typing, classes, and interfaces to improve code maintainability and scalability.
SPA (Single-Page Application): A web application that loads a single HTML page and dynamically updates the content as the user interacts with the application.
Localhost: A hostname that refers to the current computer being used.
REST API: An API that conforms to the constraints of REST (Representational State Transfer) architecture, enabling interaction with resources through standard HTTP methods.
Course: A set of HTTP response headers that are required to allow cross-domain communications.
JavaScript: A high-level, often just-in-time compiled programming language that conforms to the ECMAScript specification.
HTML: The standard markup language for documents designed to be displayed in a web browser.
CSS: A style sheet language used for describing the presentation of a document written in a markup language such as HTML.
DOM: A programming interface for HTML and XML documents.
Stringify: Converting objects to string format.
ASync: Describes one or more processes that do not occur at the same time.
Varchar: Variable length character string data type.
Integer: A numerical data type representing an integer.
Void: When a function does not return a value.
Json: A minimal, readable format for structuring data.
DB: Short for database.
TS File: The Typescript file for an angular component, where program logic is kept.
HTML Template: The HTML code associated with a component that is displayed in the application.
Module: The imports and exports used in a component.

Angular 17 and .NET Core Full Stack Tutorial

Okay, here’s a detailed briefing document summarizing the provided transcript, focusing on the key themes, ideas, and important facts, along with relevant quotes.

Briefing Document: Angular 17 and .NET Core Full Stack Application Tutorial

I. Overview

The transcript details the construction of a full-stack web application using Angular 17 for the front-end and .NET Core for the back-end API. The tutorial walks through setting up the development environment, creating Angular components, integrating Bootstrap for styling, implementing routing, performing CRUD (Create, Read, Update, Delete) operations, and connecting the front-end to the back-end API.

II. Main Themes and Key Concepts

Setting up the Development Environment: The tutorial begins by emphasizing the necessary prerequisites for Angular development. This involves installing Node.js and Visual Studio Code. “For building the angular application you have to make sure that you have prerequisites installed on your system so first of all you’ll have to go to this particular website nodejs.org and download the execut ible file for installing nodejs on your system”. The Angular CLI (Command Line Interface) is installed globally using npm install -g @angular/cli.
Angular Project Creation and Structure: The tutorial demonstrates how to create a new Angular project using the ng new command, specifying the project name (e.g., ng new hoc-gadget-shop) and stylesheet format (CSS). The importance of the src folder and index.html file as the top-level HTML template is highlighted. “If you take a closer look over here you’ll see that SRC folder is there and this is the folder that you want to focus on right now we have index.html file so how you can understand is that this is the top tier file of HTML template whatever is rendered in the browser this it is being rendered at the top level from here”.
Component Creation: The tutorial explains the concept of components in Angular and how to generate new components using the ng generate component command. It demonstrates creating an “inventory” component within an “app-components” folder. “For generating the new inventory component what we’ll have have to do is we’ll go to the solution and stop the running process with control c as I told before we’ll give the command NG generate component app components slash inventory”
Routing: The routing module is discussed as a mechanism for navigating between different components in the application without full page reloads. The tutorial uses routerLink in the HTML templates and configures routes in app.routes.ts to associate paths with specific components.
Bootstrap Integration: The tutorial demonstrates how to integrate Bootstrap for styling the application. This involves installing Bootstrap using npm install bootstrap –save and including the Bootstrap CSS and JavaScript files in the angular.json file. The tutorial then uses Bootstrap components like navbar and form elements. “npm install bootstrap save by using this command I should be able to successfully integrate bootstrap in my application”.
Data Binding: The tutorial explains how to bind input fields to variables using two-way binding (ngModel) and how to display data on the UI. Two way data binding is used to access the input fields. “You might already be aware about two-way binding and that is what we are going to perform here for that so I’m just giving the data structure just giving it some default values we have product ID product name available quantity it could be zero and then we have reorder Point”
CRUD Operations: The tutorial covers the implementation of CRUD operations:
Create: Submitting a form to create new inventory items or customers and saving the data to the database.
Read: Fetching data from the database and displaying it in tables on the UI.
Update: Editing existing data and updating the database with the modified values.
Delete: Removing data from the database.
.NET Core API Development: The tutorial guides the creation of a .NET Core Web API to handle the back-end logic. It covers creating API controllers, defining models, connecting to a SQL Server database, and implementing stored procedures for data access.
Database Interaction: The tutorial covers saving the inventory data into the database table through a store procedure.
Front-End to Back-End Communication: The tutorial demonstrates how to connect the Angular front-end to the .NET Core API using HttpClient. It shows how to make HTTP POST, GET, PUT, and DELETE requests to interact with the API endpoints. The integration of HTTP client to post the data for the HTTP method post to the server. “In this we’ll use this HTTP client post the data and we have to pass the URL so we’ll have to define the URL over here as well”.
Asynchronous Operations: The tutorial utilizes RxJS observables and the subscribe method to handle asynchronous HTTP requests.
CORS Configuration: The tutorial addresses Cross-Origin Resource Sharing (CORS) issues by configuring the .NET Core API to allow requests from the Angular development server (localhost:4200).
NG Bootstrap: Demonstrates usage of NG Bootstrap to create Dialog boxes and other components for user input. Includes installing ng-bootstrap using NPM. “using NG bootstrap for creating a dialog box that would be displayed once the user clicks on delete button”.
Dialog Box/Modal Implementation: Implements using NG Bootstrap to create Modal Dialogs, for user confirmation on Delete operations or inputting data to Add/Edit records.
Disabling Form Fields: Provides examples of how to disable form input fields using the disabled attribute in the Angular HTML template.

III. Important Facts and Code Snippets

Angular CLI Command: ng new <app-name> (to create a new Angular project).
Install Bootstrap: npm install bootstrap –save
Command to generate new Angular components: NG generate component app components slash inventory
Run Angular application: NG serve
Include Bootstrap CSS in angular.json: (Example path) “node_modules/bootstrap/dist/css/bootstrap.min.css”
Include Bootstrap JS in angular.json: (Example path) “node_modules/bootstrap/dist/js/bootstrap.bundle.min.js”
RouterLink Syntax: <a routerLink=”/inventory”>Inventory</a>
HTTP Post: this.http.post(API_URL, body, httpOptions).subscribe(…)
CORS Configuration in .NET Core: (Snippet from Program.cs)
builder.Services.AddCors(options => {
options.AddPolicy(MyAllowSpecificOrigins,
policy =>
{
policy.WithOrigins(“http://localhost:4200”)
.AllowAnyHeader()
.AllowAnyMethod();
});
});
Example SQL Insert Statement in .NET Core:SqlCommand cmd = new SqlCommand(“SP_saveInventoryData”, conn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue(“@productID”, requestDto.ProductID);
// … other parameters
cmd.ExecuteNonQuery();

IV. Potential Gaps/Areas for Further Exploration

Error Handling: The tutorial provides basic console.log for error handling. A more robust error handling strategy, including displaying user-friendly error messages, could be explored.
Validation: Form validation is mentioned, but the tutorial does not dive deep into implementing specific validation rules. Client-side and server-side validation techniques could be explored.
Authentication/Authorization: The tutorial lacks any discussion of authentication or authorization. Implementing user authentication and role-based access control would enhance the security of the application.
Testing: The tutorial does not cover unit testing or end-to-end testing. Adding tests would improve the reliability and maintainability of the application.
State Management: For larger applications, a more sophisticated state management solution (e.g., NgRx, Akita) might be beneficial.
More Complex UI Elements: The tutorial uses basic Bootstrap components. Integrating more advanced UI libraries or custom components could be explored.

V. Conclusion

The transcript provides a comprehensive guide to building a full-stack web application using Angular 17 and .NET Core. It covers the fundamental concepts, tools, and techniques necessary to create a functional CRUD application. While there are potential areas for further exploration, the tutorial provides a solid foundation for developers looking to learn these technologies.

Angular 17 and .NET Core Full Stack Guide

FAQ on Building a Full Stack Application with Angular 17 and .NET Core

Question 1: What are the prerequisites for building an Angular 17 application?
Answer: Before building an Angular 17 application, you need to have Node.js installed on your system. You can download the installer from nodejs.org. Additionally, you need a code editor such as Visual Studio Code. The tutorial uses Visual Studio Code, and you can download the installer for your operating system from the Visual Studio Code website.
Question 2: How do I install Angular on my system?
Answer: Once you have Node.js and Visual Studio Code installed, you can install the Angular CLI (Command Line Interface) globally using the command npm install -g @angular/cli in your command prompt or terminal. The tutorial mentions using Angular 17.
Question 3: How do I create a new Angular application?
Answer: To create a new Angular application, navigate to the desired folder in your command prompt or terminal and use the command ng new <application-name>. Replace <application-name> with the desired name for your application (e.g., ng new HGadgetShop). During the creation process, you’ll be prompted to choose a stylesheet format (CSS is recommended), and whether to enable server-side rendering.
Question 4: What is the basic structure of an Angular application?
Answer: A newly generated Angular application has a specific structure. The src folder is where most of your application code resides. The index.html file is the top-level HTML file that is rendered in the browser, and it contains the <app-root> tag. The application component is the core component with its template (.html), TypeScript file (.ts), and CSS file. The app.component.html file initially renders the content you see in the browser.
Question 5: How do I run an Angular application?
Answer: To run an Angular application, navigate to the application’s directory in your command prompt or terminal and use the command ng serve. This command builds the application and starts a development server. It will provide a URL (usually localhost:4200) that you can open in your browser to view the application. The ng serve command also watches for changes in your code and automatically reloads the browser when changes are detected.
Question 6: How do I integrate Bootstrap into an Angular application?
Answer: To integrate Bootstrap, first stop the running Angular application with Ctrl+C. Then, install Bootstrap using the command npm install bootstrap –save. After the package is installed, you need to include the Bootstrap CSS and JavaScript files in the angular.json file. In the styles array, add the path to node_modules/bootstrap/dist/css/bootstrap.min.css. In the scripts array, add the path to node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.
Question 7: What is routing in Angular and how does it work?
Answer: Routing in Angular allows you to navigate between different “pages” or components within your application without reloading the entire page. To implement routing, you need to use the <router-outlet> tag in your main template (e.g., app.component.html). This tag acts as a placeholder where the content of the routed components will be displayed. You define the routes in the app.routes.ts file, specifying the path and the corresponding component. You then use <a routerLink=”<path>”> in your templates to create links that navigate to the specified routes. Additionally, you need to import RouterModule in your app.component.ts file.
Question 8: How do I perform CRUD (Create, Read, Update, Delete) operations in a full-stack Angular and .NET Core application?
Answer: To perform CRUD operations, you’ll need to create corresponding APIs in your .NET Core backend (e.g., using HTTP POST for create, GET for read, PUT for update, and DELETE for delete). In Angular, you’ll use the HttpClient service to make HTTP requests to these APIs. For example, to create a new record, you’ll use HttpClient.post() to send data to the create API. To read data, you’ll use HttpClient.get() to fetch data from the read API. The responses from these APIs can then be used to update the UI. Stored procedures are generally created for these processes in SQL Server.

Angular Routing: Navigation in Single-Page Applications

Angular routing is a concept that allows navigation between different pages or components in an Angular application without reloading the page. Here’s a breakdown of how it works, according to the sources:

Purpose Routing enables traversal from one page to another while keeping the main template intact. It helps in displaying HTML structures provided in a particular component upon clicking a specific item, like navigating to an inventory component.
Key Components:
Router Outlet: In the main template (e.g., app.component.html), the <router-outlet> tag designates where the content of the navigated component should be displayed. After the nav bar, any HTML template can be displayed through this outlet.
Router Link: In the HTML template, routerLink is used to specify the path to navigate to when a link is clicked. Instead of href, routerLink is used, along with the path.
Route Configuration: The app.routes.ts file defines the paths and their corresponding components. It consists of an array where each object maps a path to a component.
Configuration Steps:

Set up the main template: Ensure app.component.html is the main template. After the nav bar, include <router-outlet>.
Define paths: In app.routes.ts, specify the path and the component to be loaded for that path. For example:
// Example route configuration
{ path: ‘inventory’, component: InventoryComponent }
Link to routes: In the HTML, use routerLink to point to the defined paths. For example, in the HTML structure, point the routerLink to the path defined in the routes file.
Import Modules: Import RouterModule in app.component.ts. Also, import the specific component.

Benefits Angular routing offers the benefit of traversing from one page to another without reloading the page.

.NET API Development with ASP.NET Core

A .NET API, as described in the sources, involves creating a web API using ASP.NET Core to handle requests from an Angular front end and interact with a database. The process includes several key steps:

Project Setup Create an ASP.NET Core Web API project, potentially within the same directory as the Angular project. The source mentions using Visual Studio for this.
Controller Creation Add an API controller to handle incoming requests. The source uses an empty API controller template and names it InventoryController.
Function to Process Requests Define a function within the controller to accept and process requests from the Angular application. This function should:
Return an ActionResult.
Have a descriptive name, such as SaveInventoryData.
Use the [HttpPost] attribute to handle HTTP POST requests.
Include a return statement (e.g., return Ok(“inventory details saved successfully”)).
Database Connection Establish a SQL connection within the function to interact with the database. This involves:
Importing necessary libraries.
Defining a connection string.
Creating a SQL connection object.
Stored Procedure Execution Call a stored procedure to save or retrieve data. This involves:
Defining a SQL command object.
Specifying the command type as a stored procedure.
Setting the command text to the name of the stored procedure.
Opening and closing the connection.
Executing the command using ExecuteNonQuery for data manipulation or ExecuteReader for data retrieval.
Model Definition Create a model (class) to represent the data being passed between the Angular application and the API. This class should:
Reside in a “Models” folder.
Have properties that match the fields being sent from the front end.
Be used as a parameter in the API function to accept the incoming data.
Parameter Passing Pass the data from the model to the stored procedure. This involves:
Specifying the parameter name in the SQL command.
Providing the value from the model for each parameter.
CORS Configuration Configure Cross-Origin Resource Sharing (CORS) to allow requests from the Angular application, which typically runs on a different port. This involves:
Adding the AddCors service in Program.cs.
Defining a CORS policy that allows requests from the Angular application’s URL (e.g., http://localhost:4200).
Using the UseCors middleware before UseAuthorization in Program.cs.
Testing Test the API using tools like Swagger to ensure it’s working correctly. This involves:
Running the application and navigating to the Swagger endpoint.
Providing sample data and executing the API.
Verifying the response code and data.
Checking the database to confirm that the data has been saved or retrieved correctly.
Data Retrieval To retrieve data, a similar process is followed using HTTPGet and ExecuteReader. The data from the database is mapped to a Data Transfer Object (DTO) and serialized into JSON format for the response.
Data Updates and Deletion For updating and deleting data, HTTPPut and HTTPDelete methods are used, respectively, along with appropriate stored procedures and parameter passing.

SQL Database Integration in Full-Stack Applications

Based on the sources, here’s an overview of working with a SQL database in the context of building a full-stack application:

Database Choice: The tutorial uses SQL Server as the relational database management system.
Database Creation: A new database (e.g., GadgetShopDB) is created to store the application’s data.
Table Creation: Tables are created within the database to hold specific data entities. For example, an InventoryTable is created with columns like ProductID, ProductName, AvailableQuantity, and ReorderPoint. It is also mentioned to create CustomerDetails table.
Data Types: Appropriate data types are assigned to each column based on the type of data they will store (e.g., INT, VARCHAR, DATE).
Primary Key: A primary key is defined for each table, usually with an identity (auto-incrementing) property to ensure unique and non-null values.
Stored Procedures: Stored procedures are created to perform specific database operations.
Purpose: Stored procedures encapsulate SQL queries and provide a more secure and efficient way to interact with the database.
Naming Convention: A naming convention (e.g., SP_SaveInventoryData) can be followed to define stored procedure names.
Parameters: Stored procedures accept parameters as inputs, which are used in the SQL queries within the procedure.
Types: Different stored procedures are created for different operations such as:
Saving data (e.g., SP_SaveInventoryData)
Getting data (e.g., SP_GetInventoryData)
Updating data (e.g., SP_UpdateInventoryData)
Deleting data (e.g., SP_DeleteInventoryDetails)
Refresh: It might be necessary to refresh the database after creating a table for the objects to be valid.
SQL Queries: SQL queries are used within stored procedures to perform the actual database operations.
INSERT: Inserts new records into a table.
SELECT: Retrieves data from a table.
UPDATE: Modifies existing records in a table.
DELETE: Removes records from a table.
WHERE Clause: Used to filter records based on specific conditions.
Data Retrieval: When retrieving data, the data types from the database might need to be cast into appropriate types for use in the application.
Integration with .NET API: The .NET API interacts with the SQL database by calling stored procedures and passing parameters.
Connection String: A connection string is used to establish a connection to the database.
SQL Connection: The .NET code uses SQL connection objects to connect to the database and execute commands.
Data Transfer Objects (DTOs): DTOs are used to transfer data between the API and the database.
Key Considerations:
Security: Using stored procedures helps prevent SQL injection attacks and improves database security.
Performance: Stored procedures can improve performance by reducing network traffic and pre-compiling SQL queries.
Data Integrity: Constraints and data types enforced at the database level help ensure data integrity.

Data Binding with ngModel Directive

Based on the provided source, data binding is a technique used to link input fields in an HTML template to variables in a component’s TypeScript (TS) file. Two-way binding, in particular, allows changes in the input fields to update the corresponding variables in the TS file, and vice versa.

Here’s how data binding is implemented and used, according to the sources:

Two-Way Binding Implementation Implement two-way binding by binding input fields to variables that are accessed on the component’s .ts file.
Variables: Create variables in the component’s .ts file to hold the data for the input fields. These variables can be part of a data structure or a model.
ngModel Directive: Use the ngModel directive in the HTML template to bind the input fields to the variables in the .ts file.
Name Attribute: It is also useful to give the input field a name attribute.
For example:
<input type=”text” [(ngModel)]=”inventoryData.productID” name=”productID”>
In this example, the input field is bound to the productID property of the inventoryData object in the component’s .ts file. Any changes made in the input field will automatically update the inventoryData.productID property, and any changes to inventoryData.productID in the .ts file will be reflected in the input field.
Displaying Bound Data: To display the data that is bound to the input fields, you can use string interpolation or other data binding techniques in the HTML template. For example:
<p>Product ID: {{ inventoryData.productID }}</p>
This will display the value of the productID property in the HTML. The stringify function converts the JavaScript value to a JSON string.
Considerations
For the data binding to work, the FormsModule must be imported into the component.
When binding to properties from the back end with different naming conventions (e.g., camel case vs. capital letters), ensure the property names match exactly in the HTML template to avoid binding issues.
Benefits
Data binding simplifies the process of synchronizing data between the UI and the application logic.
Two-way binding makes it easy to capture user input and update the UI in real-time.

Angular, .NET, and SQL: Implementing CRUD Operations

CRUD operations refer to the four basic functions of persistent storage: Create, Read, Update, and Delete. The sources describe the implementation of these operations in the context of building a full-stack Angular and .NET Core application.

General Workflow

Front-End (Angular):

The user interacts with the UI (e.g., filling out a form, clicking a button).
Data is bound to the UI elements using two-way data binding (ngModel).
An HTTP request is sent to the back-end API.

Back-End (.NET API):

The API receives the request and processes it.
The API interacts with the SQL database.
A stored procedure is executed to perform the requested operation.
The API sends a response back to the front end.

Database (SQL Server):

The database receives the request from the API.
The appropriate CRUD operation is performed on the data.
The database returns a result to the API.

Operation Details

Create (Save)Angular: A form is used to collect user input. On form submission, the data is sent to the .NET API via an HTTP POST request.
.NET API: The API receives the data, creates a SQL connection, and executes a stored procedure (e.g., SP_SaveInventoryData, SP_SaveCustomerDetails) to insert the data into the database. A model is used to map the data to the stored procedure parameters.
SQL Database: The stored procedure inserts a new row into the specified table.
Once the data is saved, a success message may be displayed on the UI.
Read (Get)Angular: An HTTP GET request is sent to the .NET API to retrieve data. This is often done on component initialization (ngOnInit).
.NET API: The API receives the request, connects to the database, and executes a stored procedure (e.g., SP_GetInventoryData, SP_GetCustomerDetails) to retrieve the data. The data is mapped to a Data Transfer Object (DTO) and serialized into JSON format.
SQL Database: The stored procedure selects data from the specified table.
Angular: The JSON response is received and bound to the UI, displaying the data in a table or other format.
Update (Edit)Angular: A row is selected for editing, and its data is pre-populated in a form. An HTTP PUT request is sent to the .NET API with the updated data.
.NET API: The API receives the data, connects to the database, and executes a stored procedure (e.g., SP_UpdateInventoryData, SP_UpdateCustomerDetails) to update the data in the database. The stored procedure uses a WHERE clause to identify the record to update (e.g., based on ProductID or CustomerID).
SQL Database: The stored procedure updates the specified columns in the table for the matching record.
After a successful update, the table is refreshed to show the modified data.
DeleteAngular: A row is selected for deletion, and a confirmation dialog is displayed. Upon confirmation, an HTTP DELETE request is sent to the .NET API, including the ID of the record to be deleted.
.NET API: The API receives the request, connects to the database, and executes a stored procedure (e.g., SP_DeleteInventoryDetails, SP_DeleteCustomerDetails) to delete the data from the database. The stored procedure uses a WHERE clause to identify the record to delete.
SQL Database: The stored procedure deletes the specified record from the table.
After successful deletion, the table is refreshed to remove the deleted row.

Additional Considerations

Stored Procedures: Using stored procedures is crucial for security, performance, and data integrity. They help prevent SQL injection attacks, improve performance by reducing network traffic, and enforce data constraints.
Real-Time Updates: After performing a CRUD operation, the UI is often refreshed to reflect the changes in real-time. This can be achieved by calling the “Read” operation after a “Create”, “Update”, or “Delete” operation.
User Experience: Displaying confirmation dialogs before deleting records and providing feedback messages (e.g., using alert boxes) enhances the user experience.
Data Validation: Validate data on both the front-end (Angular) and the back-end (.NET API) to ensure data integrity.
Error Handling: Implement proper error handling to catch and handle exceptions that may occur during the CRUD operations.
Asynchronous Operations: Use asynchronous operations (e.g., async/await) to prevent blocking the UI thread while waiting for the API to respond.

By implementing these CRUD operations, the application enables users to manage data effectively through a user-friendly interface.

Complete FULL STACK PROJECT | Angular | .Net Core | SQL

The Original Text

hi friends welcome back to our channel in this video I’m going to show you how to start building a full stack application for the front end we’re going to use angular 17 and for the back end it will be net code now first of all for building the angular application you have to make sure that you have prerequisites installed on your system so first of all you’ll have to go to this particular website nodejs.org and download the execut ible file for installing nodejs on your system so once you have it on your [Music] system you’ll open this file and as I already have node.js install this is the particular message that I’m getting but you’ll not get it you if you don’t have it already installed on your system you’ll have the setup completed and after the installation we’ll move on to the next prerequisite you’ll go to this particular website Visual Studio code and download for your particular OS the installer for visual studio code once you have this particular installation completed we are going to install angular on the system and how we do that we go to command prompt and give this particular command I press enter and the installation is in progress npm install Hy at angular CLI so this will make sure that the latest version of angular is installed on your system in this particular video when you are seeing it angular 17 is the version that we are using now this says is that 225 packages have been changed in 18 seconds so if you do not already have angular installed on your system it could have said the packages are added instead of changed once this is done what you can do is I already have a folder created over here in my system and in this particular folder I’m going to create the application that I require for my gadget shop and I’ll be giv giving it the name with this particular command NG new H gadget shop this is the application name that I am giving I press enter now what’s being asked is which style sheet format do I want to use and I want to use CSS so yeah basics of HTML and CSS You’ always want to know before beginning any angular project do I want to enable server side rering and static side generation no I do not want that so I press no the installation of the packages is in progress that means my application is being created great so I have got package installed successfully message over here that means the application generation has been completed and how I can make sure is that this is the folder that is created for my new application H gadget shop and what I’ll do is I’ll just change the directory over here that means that I have opened the command prompt inside that directory now I can give the command code dot this is the command that we use to open the visual studio code in from this particular application through command prompt now Visual Studio code should open and the application will be opened automatically in this so over here we have it the entire structure is ready for a newly generated application if you take a closer look over here you’ll see that SRC folder is there and this is the folder that you want to focus on right now we have index.html file so how you can understand is that this is the top tier file of HTML template whatever is rendered in the browser this it is being rendered at the top level from here and inside the body tag we have app hyphen root so this contains all of the HTML information that will be shown on the screen how do I make sure that what I am saying is correct I can show you over here by running the application so if I just open the terminal over here this is also open the power shell terminal we can see over here it says Powershell terminal so I’ll close this one and we can start working on this particular terminal which is inside the visual studio code it’s kind of easier to access I’ll run the application what I am doing is running the application through this particular command NG serve it is going to build the application first make sure that there are are no syntactical errors and then it’s going to give me a URL this is the Local Host URL that I have to open control and click the URL is opened Local Host colon 4200 and this is the entire information that is being rendered through index.html file but I see over here that I don’t have any tag related to what is being shown on the screen so how do I make sure that this is getting R rendered through app hyphen route through this particular app folder this is the component folder and this is the HTML structure related to it so if you’re already aware about the basics of angular it’s pretty easy for you but for the beginners who are going to learn angular this is the part where they can focus on and we see over here that this is the content that has to be replaced so whatever we are seeing on the screen is being rendered through tags from here from this particular app component and this is the TS file related to it so whatever typescript code we’ll be writing we’ll be writing over here in this file and whatever HTML tags we want to give whatever HTML template we need to provide to the application we’ll do it from here and the top tier file is index.html so I hope you have like understood the basic structure of the angular application and now to make sure that uh this is the correct file that we are referring to over here I’ll make a change I just type over here hello we already saw that in the browser we were seeing this your app is running I have written hello over here and saved it so after I saved it it says that page reload sent to client so this is a benefit of using NG serve command that it will automatically transfer whatever information you have changed whatever file you have changed to the browser you don’t have to reload the browser or rerun the application again and again after making your changes I’ll just open the browser again and over here we can see the changes so that has made sure that whatever information we are seeing over here it is being rendered through app. component right now but we want to make changes to this particular HTML template we don’t want it for our hoc gadget shop we’ll be using some bootstrap to enhance the look of the page so we’ll see how we are going to do that so first of all we’ll have to install bootstrap in angular application and how we’ll do that I press control+ C that will end the session that is running right now and now we have to type the command npm install bootstrap save by using this command I should be able to successfully integrate bootstrap in my application see this is the node modules folder and if I I expand it you’ll see that there is no folder named bootstrap I have to install it in the application to use it so that is why I have to run this command I press enter okay after running the query it says that bootstrap is integrated successfully into the application over here we can see that we have the folder now bootstrap in nodecore modules folder and we have to include the Javascript file and the CSS file of the bootstrap into the application how will we do that this is the angular.js file and over here if you scroll down you have online number 29 for me Styles mentioned and this is taking the styles from this particular file currently this is styles. CSS in the source folder so over here we have to mention the Styles as well as scripts and what will be the scripts it will include the JS file from the bootstrap folder this is the JS file that we want to include over here we’ll take the relative path nodecore modules bootstrap then we have this folder jsst strap. bundle. min.js so we have mentioned the JS file in the scripts so this is kind of global setting that we are making in the application and we’ll also mention the CSS file this is not JS it will be CSS strap do men. CSS in the CSS folder you can see this file over here so I have included in angular.js and now what we’ll do is we’ll make some changes in app. component. HTML we want to remove everything that is currently existing and I’ll just type this keyword hello over here to make sure that new changes are getting reflected I’ll do an NG serve to run the application again okay great so the application is running now and we see that all of the content that we were seeing earlier on the browser we’re not seeing now we are only seeing hello keyword that we have typed in app. component. HTML so what I want to do is I already have some HTML template for the landing page first of all what we’ll do we’ll add the header for our landing page so the template that I already have for the header I have referenced it from bootstrap website only so this is the one that we’ll be using and I’ll make the changes I’ll save it it says page reload send to C great I don’t have to reun the application again and again and you see over here that the new nav bar is coming this is the header that we want to have in our application what we can do is make some changes on this this is hoc gadget shop so I have replaced that nav bar with hoc gadget shop we’ll keep home as it is and then we could have admin over here this could be inventory and this could be customers I’ll just save it and we can check it also yes these are getting reflected inventory customers so you see this all of the changes are getting real time updated on our application whenever we are changing it and what I want to do is I can remove link and disabled as of now from the HTML template because right now we don’t need those I have kept the drop- down option available this is to make sure that you also understand how we use dropdowns in the Navar and saving this so I come over here we have inventory and customers so these are the options that we are primarily going to change so I hope you have all understood how we have integrated bootstrap successfully into the application and utilize the CSS over here for our landing page now what we’ll do is We’ll add a component for inventory so for generating the new inventory component what we’ll have have to do is we’ll go to the solution and stop the running process with control c as I told before we’ll give the command NG generate component app components slash inventory so why I have given Here app component SL inventory because what I want the command to do is create a new folder over here because I want to keep the newly created components in a different folder so here you can see that app components is generated through this command NG generate component app component / inventory and if you open this folder inventory is the new component over here we can see that it is created now we’ll start working in HTML file of the inventory component now in this inventory. component. HTML file we’ll be giving the HTML structure of the inventory component and how do we travel to this component because we know that currently app. component is working the HTML structure is showing whatever we have given over there but what I want to do is that on this particular item click the drop down that we have on the browser we want to go to this particular component inventory component right so how do we travel to this page and for that what we’ll be doing is we’ll be using routing so this is a very important concept for you to learn if you are not aware about routing concept already so please Focus here for the routing to work over here what we have to do is make this app. component. HT HTML like the main template of our solution so you have to understand that is app. component is like the main page which will be shown on all of the pages it will be uniform throughout the pages in the application and after our Navar we are going to write router hyphen Outlet so what we want the solution to do is whenever we are changing the pages after the nav bar whatever we are giving whatever HTML template we want to give it should be displayed through this particular router what I mean to say is this is the nav bar and we have multiple options we have inventory we have customers and then we have home so if I click on any of these whatever template I want to show it should be displayed through this router outlet and the router Outlet will be displaying whatever HTML structure I am providing in the particular component that is inventory component over here because this is the one that we are focusing on right now so what we want to do is when we click on this particular item it should show whatever content is being mentioned in this file in this inventory. component. HTML now for that what we have to do is we can remove the href from here we’ll make mention router link and then we have to give the path so over here I have mentioned the path but now what I have to do is Define this particular path and how do I do that we have to open ab. routes. TS so in the routes array we’ll be giving the path mention the path name this is the path that we gave in the HTML structure and then mention the component so we are going to use inventory component so the intellisense is working and that is why I am going to automatically use it and this has automatically imported it because the visual studio intelligence is working over here if it is not working for you then you have to import it manually through the given particular file structure that you have and then use it over here so now I’m saving it and then I am saving this particular file also app. component. HTML I have given the router link over here and I have mentioned router Outlet in this particular file only so what it should display is it should display whatever is mentioned in this particular file so let’s check if it is working or not we have have to run the solution for that okay so the solution is running but before we go to the browser through this particular URL what we have to do is we also have to include the component the inventory component and the router module in app. component.ts file so we’ll open that and over here we’ll write router modules that we are importing from angular / router and import it over here also and then we are also importing inventory component so the intellisense works and the import is all already mentioned here automatically if it is not working for you you can mention it manually also as I have said before I’ll just save this after saving we going to this particular URL opened I go to inventory great so the page says inventory works that was already mentioned in the HTML template of inventory component and we have come to this particular part that we gave in the routes file this is happening after we are clicking over here on the inventory option so I hope all of you have understood how routing is working in angular through routing we can go to any particular page we are not reloading the page as it’s the benefit of using angular and we are traversing from one page to another keeping our main template intact because you see over here that we have the nav bar and we are keeping our main template intact and still traversing from one page to another the main template is mentioned in app. component. HTML so after this what we can do is we can give the correct HTML template over here that we want want to have on this particular page so I’ll just paste that particular HTML template over here remove this inventory works and I’ll be saving this HTML file go to the browser on the link so this is the basic HTML template that I have used because um the whole project series is regarding angular and then at the back end we using net core and SQL for the apis we don’t want to focus on bootstrap as much but I do want all of you to understand how it works and how you can use the bootstrap integrated into your angular application you can use this HTML template if you’re building a basic project and even if you want to enhance the project you can use the advanced learnings of some CSS so over here we have the submit form for the inventory details that we want to capture and you see over here that I have already mentioned some static data in the HTML template in the inventory details table we are going to populate this particular data dynamically I’m going to do it with you through the series and all of this data will be shown dynamically and not directly from the static HTML template so that we are going to do but firstly what we are going to see is how to add a new row how to submit this particular form for the inventory details and add this Row in our table that is the first operation of the cred operations is to create create a row in the table so this is what we’ll be seeing now because if I am just choosing over here I’m mentioning something and this is the product ID that I have or I could use any particular product from the dropdown I want to save it so if I click on it currently nothing is going to happen that we have to build the functionality we have to build along the way and also what I want to do is add a row for this particular form where I’m mentioning the details of the text box also because currently we are seeing the text box but we are not seeing what it stands for so that is one thing that I’m going to add in the HTML template and then start with the create operation for this form okay so let me just go to inventory. component. HTML file and over here I’ll add the code for a row which will just describe the fields that we have on the form and I’ll save it and come back to the browser over here we are seeing the labels also for the fields and now what I want is an action being performed when I click on this submit button after filling some values so for that we have to consider this form and take all of this data and submit the form once the data is filled for that what we’ll do is I’ll have a function created on the TS file okay so here is the TS file related to this component now what I am saying is on submit this should be a function return type is void I don’t want anything to be returned and I just want to alert form submitted successfully and now how will the form know that this function is to be called when I am clicking on the button from the HTML file that link has to be done right so for that what we’ll do is just have an NG submit attribute and call the function so this is the function and currently we are not validating any field so I’ll just add a no validate attribute also saving it one more thing that we have to do is add an import of the form module so what we are saying is we are asking the this particular comp component to import the forms module and perform the submit action we are having it in Imports saving the file going to the browser now and now I click on submit so just an alert should come and here it is it says form submitted successfully that is the message that we had given over here if you see form submitted successfully right so So currently we are not showing any data which was entered in the fields we are not just considering any data that was entered in the fields I just wanted you to show how the form submission would work and now step by step we’ll go we’ll take the fields also into consideration so after that what we are doing okay so now for that what I’m going to do is bind this input field that we have not just one but all of the input fields to the variables that we’ll access on the component.ts file so you might already be aware about two-way binding and that is what we are going to perform here for that so I’m just giving the data structure just giving it some default values we have product ID product name available quantity it could be zero and then we have reorder Point okay so the values with colons instead of equal to okay so saving it and I want to take these variables for the two-way binding so this is the first input field that we have and I want to provide the model for it inventory data dot product ID and also give the name that is product ID I think this should suffice the next one we have is product name just confirming the name from the DS file yes it’s product name so using the third variable here available quantity and then there is the last one that is reorder point so just I’ll copy the name from here and use it okay so saving it now what I want is I just want to show this data also okay what I’m saying is that this is a Json right all of the data would be available in Json format for that I just want to use the stringify function and pass the in inventory data in it saving it so we’ll go to the browser over here what I’m doing is giving some random values I click on submit and you see that the alert box is successfully showing all of the fields that are present with their correct values in the Json format so this part is successfully achieved after this we’ll move on to the backend code for the API and create a link to submit the form and send it to the web API request okay so for that I have opened visual studio and we are going to select asp.net code web API clicking on next over here and what I am doing is in this particular location where we had created our angular project I’m going to create the web API project as well I want to give it a name so it could be it you see gadget shop API next and now what I want to do is just keep the selected options as such and click on create so it’s created the project for me and opened the solution over here we see the files also that are created under the controller folder this is the default controllers file that is coming what we are going to do we are going to add our controller file and that is going to be an API controller so I’m right clicking on the controllers folder click on ADD and add a controller over here so from the template we are going to select the API and we are going to select empty API controller over here I click on ADD and now I should be giving the name of the controller as well so over here it would be inventory controller clicking on ADD so here I have the f created and what we want to do is add a function over here what that function will do it is going to be an function which will accept the request from the angular project so so from the front end the request will come with the inventory details and this particular function will process it so it should be returning the action result it’s going to be index or let’s have it save inventory data that could be the name of the function and this is going to be an HTTP post request so I’ll give the attribute as such and let me just add a return statement otherwise the syntax tax error would keep on coming over here it’s going to return okay inventory details saved successfully so the basic purpose of this particular function is to process the web request that is coming from the angular application now for that we’ll have to create a SQL Connection in this function because the meth method is going to save the inventory data into the database table through a store procedure for that we’ll be creating a SQL connection over here we are getting a syntax error I’ll just import the required libraries it’s going to install the new package automatically Al and now in the SQL connection we can also mention the connection string here only while initializing so I’m giving the connection string over here and I already have the value I can give it over here okay so after this what we want to do is just log to our DB why I’m doing that before is because I want to be ready with my table and St procedure before I make a call from the net to the database now over here we have our databases and gadget shop database is the one that we are going to use for our application let’s create a new table in this database I’m just opening a new query and we’ll give the command create table it could be inventory table with all the fields that we are sending from the front end product ID giving it integer data type then we can have product name and it could obviously be a v care the reason is that we’ll be passing some string value from the front end although we are passing it as a drop down index but yes we should be saving it as a string only because the name Will justify the data type over here and the reorder point would be int again and we also had available quantity okay so these are going to be the fields and we can also have an index kind of field which will be identity integer of course and it could be a primary key so that it is never null and always having a unique value we’ll create the table and now we can also create a stored procedure what we want to do is we want to save the data and we can give it exact name that we have over here for the functionality Spore save inventory data so this is the kind of nomenclature that I follow to define a stored procedure and what parameters it will take is it’s going to take these parameters and we know that when we are passing a parameter or it is a variable we are defining a variable in the store procedure we’ll be giving it at theate prefix and then giving the name so this is the parameter that we are using basically four parameters these are the parameters that we are using and what we want to do is just take the parameters and save it in the table going to give the column names that we are saving into so we have written a insert statement mention the column names and then we’ll give the values that we are inserting what are the values over here we have these parameters so it’s going to insert a single Row in the table because we are not inserting multiple rows at the same time we’re just passing single rows and entering over here in the table and I think I have to add a parenthesis yes so it should work fine so you might be seeing that there is a syntax error that it it is giving it says that invalid object name the reason is because currently the database is not refreshed I have just created the table and then open the window for the SQL Editor to create a stored procedure so the database is not refreshed as such if I open it again it would work fine if I make a connection to the DB server again but uh I’ll just execute this particular store procedure if it says successfully completed or executed the command it’s working all fine and there is no error in the store procedure otherwise we’ll see if you’re getting an error so I’ll just execute it okay so command completed successfully that means the store procedure is created successfully and all is working fine there is no error as such so you could also face this issue that you have already created the table but it’s still saying the object is invalid in the DB but not to worry it might take some time it doesn’t take some time to refresh you have to make the connection again and then it works properly fine if the next time you’re opening the SQL Server management Studio again it will not show any error as such okay so let me just go to the net code and over here we have already defined the connection string now the next step is to define the SQL command we’ve already mentioned the SQL connection now we’re going to give the SQL command and how we are going to do it we have have to mention the command text it’s going to be the store procedure name then we have to give the command type command type dot store procedure and give the SQL connection as well connection here and then take the variable that we have already defined now for the command text we’ll have to give the stor procedure name exact store procedure name that we have over here and mention it in the string so now this is completed after this what we’ll be doing is opening the connection so let me just open the connection let me execute the command now it’s going to be an execute non-query because we are not performing any retrieval from the database right now we are just inserting the data and we also have to make sure that we are closing the connection because that is very important it’s connection do close now this is all fine we have mentioned the command text we have opened the connection and we have executed our store procedure and we have closed the connection but the main task was to pass the request to the database now for taking the request we’ll have to create a model that is passed to this function from the front end like we had created a data structure in the Json format on the angular application the same way we’ll have to define a class in this application also that will accept the request through this function so let me just add a folder in the solution and we’ll give it the name models over here I can add a class it is going to be inventory okay it just got loaded inventory request D2 so this is what we are giving the name to our model now we have this class and we can give the properties over here what parameters will be passed through this class first is going to be product ID second is going to be product name so it’s the benefit of having intelligence because it’s giving you suggestions as well now we don’t have product type but we have available quantity so that is the name that we are giving and then we have reorder Point okay so let me just mention this last property and now we can use this class I’m saving it we can do a save all and use this class in the request okay so for this also we have to import this library now we have to pass it to the SP as well so let me just add it to the parameters of the SP now here in this function we have to mention the name of the parameter and then give the value that we are trying to pass so first is the product ID this is the value that we are trying to pass to this parameter and then we have three other parameters as well product name available quantity and reorder point so the reorder point was this yes just confirming that the names are matching exactly with our store procedure because if they don’t match will’ll get an error while executing the function so let me just save all of it now we’ll just run the application to check if the web API is working fine I’ll just close this dialogue box because currently we’re not setting up slsl certificate we just want it to run on the local okay so the application is running now and over here we see the web API that we have created this was the default that was given by the net code and now we have this function as well this is a post method and over here it’s taking these parameters we can try it out also what I’ll do is I’ll just give some random values over here and and give values for all the parameters and click on execute 200 is the success Response Code and that is what we are getting the body has the custom message that we had given in the function so it’s all working absolutely fine by executing it we can see that but how can we make sure that it is working absolutely fine we have to go to this particular table and check if the data that we had passed from the request is it saved or not in the table because that is the whole motive over here to save the data into this particular table through the store procedure by making the connection from net core I on execute and over here we see one row is successfully inserted into the table so we have made the connection from the net code to the database now the next step is to make the connection from the angular application to the net code web API now in the angular code in inventory. component.ts where we are submitting the request we have to pose the data to the net code web API for that what we’ll do is just import HTTP client and we can have an HTTP client injection in this class now this we’ll be using to post the data for that what are the requirements ments to post the data we want to do it on the submission correct so here on submit function in this we’ll use this HTTP client post the data and we have to pass the URL so we’ll have to define the URL over here as well it’s going to be the API URL let me just Define it in the function itself for now and we’ll give it the value the value that we’ll be taking from and paste it in Visual Studio code okay so we have given the value now yeah it’s going to be let API URL then we have to mention the body correct so for the body we have to pass the inventory data so after passing the body of the request this is not mandatory but we can give the HTTP options as well so if you have some specific header values you can include it here okay let me just Define the HTTP options close this let HTTP options so let me give the headers here and and it’s going to be new HTTP headers and then we can give the UN content type as well value could be application SL Json because this is what we are going to pass I’ll save it and over here what we are going to do is once we have the post method ready we have to subscribe to it this is how it works we’re going to subscribe to this post method because this is not going to execute simultaneously as we are hitting on submit function we don’t want to wait for it to execute this is an asyn call that we are making and in the Subscribe we give the actions that we want to perform what should happen if there is an error the main task is to Define what should happen once it is completed so once it is completed we want to give the function here and this alert should only happen once the post request is completed so we’ll move it here now we have defined the post call in our angular code let me just save it and we have to make a change in the app.config as well over here we have to provide HTTP client this function we are defining in the providers and saving so what I’m going to do is just put a debugger over here okay to check if the call is being made to the backend API or not what request is coming but uh before that there is one more change that we’ll have to make if you focus over here on the URL you’ll see that this is Local Host colon 7019 is the port that we are using and in the angular application that is running it is 4200 so we’ll have to make changes for this net core web API to handle the course request now for that I’ll just stop the execution once and open the program.cs file to make the change as we see over here we already have some methods being called for the application so we also have to make the changes for different servers request that are being passed to this web API so I’ll begin making the changes Define a variable and give it a value underscore same name I’m taking over here for the text value and then we have the Builder right various functions of services are getting called and over here only we’ll have to call the add course function also so I’ll make the changes for that options do art policy give the name that will be the variable that we have just created and then for the Builder we have Builder with Origins okay so over here we are going to give the URL of the Local Host that we have so I’ll give the Local Host 4200 we had okay just switching on my numlock and then we can have I think one without the server name also this way we have defined we want to allow any header we want to allow any method and set is origin allowed some domains so after this one more thing we have to do before authorization we have to call another function that is use course and over here also we’ll be passing the variable that we have created now I’ll just save this over here we had the syntax error after this what we’ll do is we’ll run the application okay but one more thing as of now we don’t want to return any message from here we are just returning the okay status so I’ll run the solution now why I have removed the message I’ll be picking it up later in the lecture that we will be sending a Json rather than a string value from here so that is one thing that I’ll be explaining to you but as of now let’s just try to save the inventory details I’ll go to the application once go to the inventory page now I’m putting some random values okay I will select mobiles from here that is another product rather than airphones because that is the one that we had already entered now I click on submit what it should do is exactly it should come over here on the debugger because now you see that we have made the connection from the front end to the net application to the net core web API and when we are clicking on submit on the angular application it is pointing to this debugger now the flow is created and now I click on continue so you see we have got the alert that this particular form has been submitted successfully that means that once the post post call is completed that we had subscribed to the alert is showing this is what we were trying to do and it is successfully achieved so I click on okay how to confirm that our data is getting saved successfully we’ll need to go to the database and over here I’ll just execute it okay so the select statement is executed and we see over here that the data is successfully saved and over here for the product name you see that we are passing the index from the dropdown so that is what is getting saved but the row is successfully created from the application so we are able to achieve the save flow from the angular to the net core web API into the database after this what we are going to do is we’ll be getting the data from the database on our angular application because what you see over here in the table this is some static data correct this is not the data that we have saved in the table so we need to bring the data from the database to the application on the front end in angular so that is the get flow that is what we are going to achieve now but now what we’ll be doing is we’ll be creating the flow from the database to the angular to get the data that is in the inventory table to this table on the screen so let’s go to the database first over here we see that this is the table that we are trying to fetch the details for let me just create a procedure and the name will be SP get inventory data so after this in this sto procedures we simply have to add this select query because we are only trying to get the data from this table and there is no other query that is required over here I’ll click on execute it says commands completed successfully that the SP is now successfully created in this database we can also check it by going onto store procedures we have another SP over here that is SP Spore get inventory data now we’ll utilize it in the net code so let’s go to the visual studio and we can just take this code and create another API that is going to be a get API earlier one was HTTP post and this is HTTP get now what we are trying to do is get inventory data and we don’t want any parameters because we’ll be selecting the data from the table without any filter also so let me just zoom it a bit and after this we’ll also have to change the name of the SP we’ll take the name over here and use it on this command text we can remove all of this code because we are not trying to pass any parameter to the store procedure now what we are trying to do is we are trying to run the command that is going to be execute Reader Command and what we can do is we could have a SQL data reader give it a name and using this SQL data reader we will be creating a object so basically what we want to do is create a list of inventory dto from this SQL data reader and return it as as a result of this action so let me create another model because to avoid any confusion in the name I am creating another model even though the same properties would be there in the new model as well that were there in inventory request dto so the name can be inventory dto I’m saving it take the properties from inventory request Dil only and just have it in this So to avoid the confusion we have created a separate model because if we want to add some properties in the class in one of the classes we could do it in future without modifying another class so let me save this and use it over here we are trying to create a list of inventory D and when we are traversing through this particular loop I want to create a object as well that will be added to this list let let me just give it the name response and this would be added over here so what we are trying to do is inventory D do product ID is equal to convert dot to reader that is SQL data reader and the name of the column would be from here so if we just run this query we see over here that product ID is returned and product name available quantity reorder point so what we want to do is give the name of this column in our code because that is what this code is going to read the the whole table would be red in the code and we want to just take the name of particular column in single line so right now I’m binding the product ID so I will give it the name for each of the columns we have different name so I’ll give a separate name over here product name then over here this would be two string because product name is a string variable if you see over here the data type is string then we have available quantity and then we have reorder Point let me just match it reorder point and available quantity so yes you have to make sure that the names of the columns that you are giving through the reader they have to be the exact names that are there in the SQL because otherwise the data would not be mapped from the SQL data table to your object otherwise it would create an issue but if you give the exact name then it’s not going to be an issue and the code is going to work perfectly fine so over here you see that intelligence is giving me the suggestion as well that we want to add the dto into this list so we’ll just take the suggestion and we have successfully added our D to the response and now what we want to do is we simply want to use a Json convert serialize object and what we want to serialize is the response so it will send send the response that is the list of inventory dto as a Json now and let me just save it do a save all we’ll run the code again we can build it also once we’re trying to rebuild the solution so that there is no error in the code that could be checked from here if the rebuild is completed successfully it says one succeeded because we have only one project in the solution so it means that our code is going to work fine syntactically logically it’s going to work fine or not we will be able to know once we execute it so let me now just execute the solution and the API the get API that we added we are seeing over here on the screen as well it’s added over here and to verify if the db2 net core web API all that connection is working fine or not we just do a try it out from here and execute the API it’s not going to take any parameters so you see that parameters is also mentioned over here that we are not taking any parameters and now we see the response body this is a proper Json that we are getting we have two products one was the product name earphones and then second one was the drop down index that was added from the front end code from the angular application both of those records that were there in the table we see over here those are coming on the screen successfully over here in the response body so this connection is successfully established now we just need to add the code in the angular to get it on the front end application so we’ll go to the visual studio code and in this particular component inventory. component.ts what we have to do is whenever the component is initialized on that point only we are trying to fetch the details so over here we have to add a new function that is going to be NG on in it once the function is getting initialized what we want to do is we want to get some data right from the back end so we already have the URL of inventory API we can just make sure that the get API also has the same request URL so over here we see that the request URL Remains the Same if we are not not passing any parameters it would be a get call so let’s make the changes for get call using this HTTP client that we had used earlier and this is going to be a get call we don’t need to pass any headers or the body we just have to mention the URL and over here we’ll only need to have the response of this get method so what we can do is just have the data and create a function around it this data is going to be the response of this get method let me just add a new object that is going to be inventory details of type any now whatever is being returned from the API from the get API I want to just map it to this new object that I have created over here once this is done what I want to do is utilize it on the HTML page but before that let me just do one thing I’ll do a console log of whatever is being returned from the API on the web angular application let me just save the details so let’s go to the browser and just open the console window we’ll do a refresh of the page and now we see over here that we are getting the response from the database on the web application as well so whatever is being passed from the get method on the web API that we have created over here we are successfully getting it on the front end as well so that connection is successfully established now the main task is to just bind it to the table because currently this is all static data we just need to bind it to this particular table and then we’ll be getting the rows dynamically from the database and not from the static HTML template so we’ll go to the inventory. component. HTML file and over here I’ll just take this row and create a dynamic row over here then we’ll comment the static data that we have first let us just create the static row we have to use an ng4 for this let inventory of invent details so what is inventory details it’s this particular object that we have created on the component.ts file I’ll just paste it so that the exact name is matching over here and in this inventory details for each of the object we have to bind the property name the name that we are getting over over here so this is the product ID so we’ll just map it and after this product ID we can bind the product name as well and then we have available quantity with a capital A so you have to make sure that what whatever property name you are giving it is exactly matching with whatever data you are getting over here because this is the response from the web API and it is there in your inventory details object so let’s go to this HTML file and yes we have made the changes binded whatever dynamically we are getting on the row and how many rows will come the number of rows that are there in the inventory details the number of objects that are there those many rows will come in the table of this tag that we have so let’s save the changes but yes first let’s just comment out whatever static data that we had given earlier commenting it out and now saving the changes let’s go to the page again it should be reloaded yes because just after saving the changes we are able to see that the reload is done and over here we are getting whatever we had saved in the table that is successfully being fetched on the screen as well this is all Dynamic data this is not the data that we had given in the HTML template it’s all dynamically being fetched from the table to the angular application on the screen so we have successfully established the get flow as well I hope you have understood what whatever we have covered till now now what we’ll do is we’ll create the functionality of this delete button what if we want to delete a particular record from this inventory details table for that we’ll have to write what action we want to perform on this delete button it has to take the selected record and delete it from the table so let’s get to the flow of creating the delete functionality we’ll go to the database and and over here we’ll be writing the store procedure First We are following the same approach that we did for the get flow it is going to be delete inventory details and over here if we just check that in the table inventory table what key should we take to delete the record product ID would be the appropriate candidate to delete the record from this particular table that we are sending from the front end to back end what we’ll do over here is just take this query and it’s not going to be a select query it’s going to be a delete query we want to delete the record from inventory table where product ID this is going to be a filter so we should Define the filter as well the stored procedure is going to accept a parameter product ID of data type in and wherever the SQL is able to find a record according to this filter where product ID is equal to at theate product ID that is being passed to the store procedure that records should be deleted so this is the store procedure that we are creating for deleting the record let me just execute this it says commands completed successfully that means that the store procedure is created over here if I just refresh it you’ll be able to see a third store procedure for deleting the inventory details so now we’ll use this store procedure in our net core web API I’ll just stop the exec ution and take the help of the existing method to create a new method now added an extra curly braces now this is going to be a HTTP delete method and we don’t want to get inventory details we are simply trying going to delete them the stor procedure name we’ll be copying from here and we want to pass the parameter now to this sto procedure so we’ll just remove all of this reading code that we earlier had for get inventory details we don’t want to send any response just send the okay code as of now and the command would be execute non-query because we are not trying to read any data but before executing the command we have to pass the parameters it’s going to be the similar approach that we had followed while saving the data the name is going to be atate product ID this is the exact name that the SP is taking as a parameter and what should we pass over here this particular web API method would be accepting a product ID so this is what will be passed to the store procedure as well we’ll just save the changes and now I’ll execute the solution so closing the dialog box and we have to see if our new web API method is added or not while the solution is running so over here it is added this is a delete API that we have created and we can try it out also we have to pass the product ID over here so if we just check what data is existing currently in the table that we also can can see over here that these are the records in the table right so we want to delete let’s say the second one we can create it also from the front end so no problem as such I’ll just pass this particular value and click on execute so over here we are getting a code 200 that means the API is successfully executed and if we see now in the table so we are a able to see that the second record is deleted so that means that our API is working perfectly and now what we have to do is just add the flow from the front end to the net code web API so that we are able to delete the record from this particular page if I just refresh this now it should have only one record so yes it is having one record only and what we’ll do is just add some value over here so that we are able to see multiple records instead of only one so let me just click on submit it says form submitted successfully I click on okay and check the table if the data is inserted or not so yes we are able to see the record inserted over here and what you’ll be able to see is that the ID column is having value three the second row was deleted right and and after that as we have set it as an identity column the next row that would be inserted would take the sequential key only so the identity would just increment it by one and set it to three it will not be two so that is one thing I hope you all are aware about for the identity columns when they are set in the SQL and over here we are able to see that we have successfully inserted the record but what is not happening is that this table is not getting refreshed so this is a very good point that we have found while inserting the record again in the table that the table is not refreshing on the go when we are clicking on submit for that what we need to do is this is the NG on init function right this is getting the records from the table this is the second flow that we had created now when I submit the record in the table from the screen what I want is the table should also get refreshed on the go so for that we’ll take this method and once the post is completed once we have the alert we also want to refresh the page so that any new data that is inserted in the table it should reflect on the screen as well so now if we go over here and I just add add some random values again I click on submit okay and you see that the table is getting refreshed now because we have called the NG on init function and as it is only fetching the records as of now we are able to call it successfully otherwise we should have called another function which was just getting the details so so what we can do over here is for the reusability approach we’ll just add another function inventory details and this function will Define it over here because NG on in it was only calling this code that is why we could easily use it in the onsubmit functionality as well but if you have more code in the NG on in it if there are some more functionalities that you are performing over here then it is a better approach to have a separate function for getting the inventory details that you could use in NG onate and then this function can be called on submit as well over here so now I’ll just save the change over here and we’ll go to the screen make some changes that is add a new record and click on submit so everything seems to be perfectly working fine over here we are able to get the records while we are submitting we are able to get the latest table details as well after this now what we have to do is add the delete flow for that what we’ll be doing over here so this is an interesting point now we have already included bootstrap in our application and now we’ll be using NG bootstrap for creating a dialog box that would be displayed once the user clicks on delete button so when the user clicks on delete button what should happen is a message should be displayed over here on the screen so as to have a confirmation from the user that they really want to delete the record because it is a possibility that they clicked on it by mistake and we don’t want to just directly delete the record we want to confirm from the user that they are trying to delete this particular record okay so let us now add the functionality of this button what do we want to do in the HTML file on the delete button click we want to call a function whenever this function is clicked we want to open confirm dialogue this function can be called and over here we’ll Define the function so which dialog box will it open now for that what we’ll do is will create a new component and in the dialogue box we are going to utilize the model feature of NG bootstrap so let us just stop the execution for now and create a new component that can be named dialog box because I want to keep the HTML structure separate from this particular component that is why we are creating a dialog box component that could be utilized at multiple places according to the HTML structure that we have okay the HTML structure would go over here but we have to install the NG bootstrap as well so let us install NG bootstrap for this and this is the particular command that we are going to use so over here we are doing a save with Legacy Pi depths it is because we want to eliminate any risk of conflicts that might arise due to peer dependency that NG bootstrap would have and also we require another installation for this that’s that is for poer JS / code after we have installed both of them we’ll be using the HTML template that I have already reference from the NG bootstrap documentation over here in this component. HTML file and save it now we want to open it from here is that correct from open conf firm dialogue so for that we’ll be using model service we are going to inject model service using the NG B model and you see that the import is automatically done through intellisense I’ll save the change changes we are going to utilize this model service to open the model and in the function we have to pass the content that we want to open so this is going to be the dialog box component and once we just mention it over here it is automatically imported as well I’ll save the changes over here and in the dialog box component what we have to do is import NGB active model from NG bootstrap and then there is a function that we have called while we are clicking on okay so let me just give it the name confirm over here and this function we’ll just mention here over here we don’t need to perform any function but we do need to close the model so for that what we’ll be doing is on the confirm button on the confirm function that is being called from here we’ll just have a model do close so rather than directly closing it over here like this we are closing it in the TS file because later on we might need to add some functionality in this particular function so let’s just go to the browser now and over here we click on delete so you see the model is opening we have a dialogue box for the confirmation of deletion so this is working perfectly fine now how do we delete the data that is selected it’s not selected through a checkbox we are directly clicking on the button of a particular record so how do I make sure that that particular record is deleted so we’ll need to pass the product ID correct the product ID that we have over here we’ll need to pass it okay and we see that this product ID is the product name so let us just change that also in the inventory. component. HTML the product ID is the hash that we have over here and this is the product name so you see as you keep on making the changes you’re able to see what Perfections you can make to your application right so this is the product ID that we need to pass to theet code web API when I click on delete this particular record should be passed to the web API this 21 31 and how do I do that I come over here we already have the inventory. product ID right that is being displayed so we can simply take this and pass it on this function why I’m doing this because when we are opening the confirmation dialogue box a record should be made there should be a record of which product ID I had clicked on which product ID’s delete button I had clicked on so for that I’m passing the inventory. product ID as well from here and I have to capture it I have to capture it okay it’s not going to be int like in the net it’s going to be like this and this product ID can be maintained over here let me give it product ID to delete so as to clarify what is the use of this particular variable now as soon as I’m passing the product ID from the HTML page to this function I want to keep a record of it so when I’m opening the model ser service what should happen is the product ID to delete should be set as product ID that is passed from the HTML page I click on Save now once I have saved it let us just confirm if it is working all fine once I have made a record of which product ID is getting deleted so we can do a console log as well I come over here do an inspect go to console window I click on delete so you see we are getting the product ID 2131 and this is going to be passed to the backend API to be deleted now it should only be deleted once I click on okay if I click on cancel it should not be deleted am I right so for that what we’ll do is we’ll make a record of what is being sent from this D dialog box so how do we do that in this particular dialog box once we are closing the dialog box and we are only closing it on the confirm function and the confirm function is only called on the click of okay when we are clicking on cancel model. dismiss that is directly called from here and we are not confirming anything so on the click on confirm only we are performing this particular function and from here we want to pass some result that result would be let’s say confirm this is the result that we are passing from the okay button click I’ll save it and we need to capture this result as well so how do we do that over here we have to capture the result once we have got the result I want to perform some action what kind of action am I performing I’m going to delete the data so how do I do that but the question is not how there should be a condition that once we have got the result we are checking also that the result is is what we had expected so if data that we are taking from the result this data is being passed from here if the data that we are getting in the result and the property of the data that is event as I have mentioned here its value is equal to confirm so only if the prop property of the event is equal to confirm then something should happen so let’s do a console log over here as well confirmed to delete else delete not required so I saved it and let click on okay so you see this is being sent from the dialogue box event is confirmed and that is how we are able to get into this condition and it says confirm to delete also now that we think of it it will never go to the else condition why because we are not sending any other data any other result from here so this this particular condition would not be even satisfied because we have only called confirm functionality from the okay button and that is sending this particular response so it’s never going to go into the lse statement so that is how we will be able to specify whatever we want to do when the event is equal to confirm so now over here what we want to do is we want to delete the inventory details so this particular function let’s mention over here what we want to do in the delete functionality and this is going to be a this. delete inventory in this particular function we want to have the API URL that we’ll take from here okay let me just give some value as well so that we are able to check the URL okay so this is the URL of the request and I want to pass it in the HTTP client delete function API URL and then we could also utilize the HTTP options or I think we can skip it for now because this is just a delete function we want to subscribe to It Whatever data we have got we just want to do some action once we get the result but before that over here you see that this is a static value that is being passed in the URL but we cannot pass the static value we have to pass whichever row was selected for the deletion from here so how do we do that we are already saving it in this particular variable so we we will utilize this variable and because this is under the class scope and not just the function scope we can directly use it over here so whatever value is set over here when this function is called delete inventory we’ll be able to utilize the value in this URL okay so now once we are able to delete the data successfully after that what we want to do is get the refresh table from the database so we had created a function earlier that is what we’ll be utilizing over here and this particular function will be called once the data is successfully deleted so let me just save the changes and uh we’ll go to the browser now okay I click on delete for this particular record it says are you sure you want to delete it I click on okay and you see that the event was confirmed the data is deleted new refresh data we have got from the database as well that means the delete functionality is also working fine if I just add something over here I click on submit this is it and now I click on delete this is also working fine if I click on submit let me just click on submit again add a new row click on delete and click on cancel so you see that nothing is happening if we click on cancel it’s only deleting once I click on okay so this is how we have integrated the dialogue model from NG bootstrap into our application created the delete functionality with end to end flow from angular to net Cod web API till SQL and all of the data is being refreshed On The Go only okay so the save functionality and delete we have just seen that it is working all fine and we are able to read the data from the table as well let’s move on to the next functionality that is edit so we are going to update the data in the table for that let’s first move on to our net code we we create another web API I’ll just stop the execution of the solution and take the help of the existing code to write another web API this is going to be a HTTP put API and we want to update inventory data over here we are going to use inventory request dto so in this particular web API we’re going to accept the whole inventory request dto we just don’t want the product ID or the product name we are going to accept whole of the inventory request dto and save whatever is coming from the front end to the backend now this particular SP we’re going to create in database for first over here we have the table inventory table and this is the data in the table right so to select which of the particular column we need to use to update the data we’ll follow the same process that we had done in the deletion of the record we are going to use the product ID column over this column only we’ll be putting the wear clause and then update the record in the table let’s create a new store procedure create procedure the name is going to be update inventory data so if this particular table is to be used just let me select something from this table over here these are the columns in this table so what I’ll do is give the parameters names as well because we are accepting a single row only just like we did in save inventory data this is going to be integer product name it’s going to be Vare according to our table these are the data types that we are using then it’s available quantity integer again and then we have reorder point that is another integer column after this what we are doing over here is we are not selecting anything in this St procedure we are trying to update the table and in this particular store procedure we want to set the columns with new values right that are coming as input from the net code to the store procedure we have product name then we have available quantity then we have reorder Point these are the three columns that we are updating and which particular record we want to update that condition we’ll give through we clause on this particular column we have already selected this column we use this column while deleting the record as well so we are updating the record through this column only in the wear condition wherever the product ID is matching with the one that is being sent from the net code to the store procedure in DB we want to update that particular record so it is possible that uh one of the column is only changed with the new value we are trying to update all of the columns in one go because even if one of the columns is not changing we are still updating it with the old value only this is the product ID column that we are using for the wear Clause okay let me execute and now over here it says commands completed successfully that means the stor procedure is successfully created in the database we could also check from here so now you are able to see that we have this fourth stor procedure update inventory data let me use the name I’ll just copy and paste it over here this is the sto procedure that we are trying to call now and now what parameters do we want to pass to this particular sto procedure we have are passing product ID but it is not from a single input we want to use the inventory request and that product ID we are trying to pass to the store procedure then we have another three columns the one is product name we’ll use product name over here from the inventory request then we have available quantity the exact name we’ll use over here then we have reorder point so these are the four parameters that we are passing to this store procedure and we’ll keep the command as execute non-query because we are not trying to read any data from the DB we are only trying to insert the record also you have to make sure that whatever parameter names you giving over here these have to exactly match with the ones that are mentioned in the sto procedure because otherwise it will give you an error while the execution is in progress so the parameter names should exactly match with the parameters name over here in the store procedure now after saving let’s execute this solution okay now you see that we already had three existing web apis we have another one that is for put we have created it to update the record in the table and we can try it out also from here now let me just check yeah this is the current table data okay we already have some record so I’ll take this product ID and update it and the product name is three available quantity is this so let me just take available quantity and the reorder point also from the table now what I want to do is I want to update the product name it is three as we have seen in the table I want to update it to mobiles I’ll click on execute and you see we are getting 200 success code we can also verify from the table now I’ll run this query again okay so I hope that you are able to see that we have successfully updated this particular column product name all of the other values we had also given as they were old only those are coming as such but the product name is updated with the new value mobiles which was three earlier so our net core web API is working absolutely fine now we need to concentrate on the front end angular part to make the connection and execute the update API okay so let’s just go to the browser first over here what should happen when we click on edit from the front end application when I’m clicking on edit for this particular row all of these fields should be populated with the row data so the product ID text box the name drop down quantity available reorder Point all of these should be populated with whichever rows edit button has been clicked on so let’s just go to the solution for that ones okay we have to go to visual studio code and over here we see that the form which is there and the text box the drop down the two other text boxes both of these are binded with this NG model inventory data that is there on our component.ts file over here we have already made The Binding from this particular structure on this form so what should happen when we click on edit over here on this edit button click this particular inventory data should be populated with the row that is selected and how it would happen we’ll just write the code for that now so over here we are defining a new function when I click on edit it should populate form for edit now in this function which particular data structure should be sent to the component.ts file from HTML see over here we are traversing through inventory details in the for Loop right and each of the row is binded through inventory so this is the inventory detail that we will send to the component.ts file I’ll take the name from here for the function and in this particular component TS file we’ll write the implementation of this function this inventory we’ll just give it the type any as of now and in this component.ts file we have inventory data that we B to bind with this inventory we cannot simply bind this inventory data to the inventory that we are getting from the HTML we have to assign each of the fields in inventory data the correct value from inventory so how do we do that in inventory data the field names are like this product ID and in inventory we see on HTML that the names are like this product ID with a capital P so we’ll take the names from here and assign each of the fields this way after product ID we have product name and similarly we have product name in HTML like this next we’ll take the available quantity and bind it to available quantity in in inventory data then we have reorder point so you see that we have simply binded the inventory data from the HTML inventory that we are getting as input in this particular function I’ll just save the changes and on HTML also we are saving the changes now let’s go to the browser and check if our code is working fine in the second row I’m clicking on edit so what happened was I click on edit for the second row correct and all of the text boxes are correctly binded but it is not happening for the drop down and why is that because we were sending index to save at the back end from the HTML page we have an index associated in our drop-down with each of the values so this is an interesting point over here for the drop-down we have indexes given to our values in the each of the option associated with the text that we are showing in the drop down so now I’m just simply giving the value same as the text that we are displaying and then we’ll see if this is also getting binded correctly when we click on edit I come over here the page is refreshed I click on edit okay so the drop-down value is also getting perfectly binded now all of the fields are getting populated when I click on edit from this particular row if I just click on edit now here on the first row this is also working perfectly fine you see that all of the form data is getting prepopulated when I click on edit so I hope that uh this was an interesting point for all of you to learn about the drop- down control on the form that for the drop down options we have a value and the text that is displayed associated with each of the options we can keep it same also and we can give it indexes also that we had given earlier and earlier when we were trying to save the data value would only get saved to the backend table now we have kept the value same as the text of the options so that would get saved now as a string value now over here on the form you see that we are able to populate the data correctly but what happens if I just change thect product ID from here because currently in the table these two are the product ID values existing right and if I change the product ID only then what will happen I’ll not be able to update any of the record in the table because that product ID would not exist correct we already have the wear condition which is checking if the product ID is matching with the one that is being sent from the front end and if I’m able to change the product ID then there is no point of sending any data to the backend to update it will not have any record to update for that particular reason we’ll have to disable the product ID text box over here when we are trying to update the data and how we’ll do that we’ll come over here on the input that we have for product ID we’ll give the disabled attribute and this particular attribute will be set according to a variable that we’ll Define in the component.ts file so I’ll give it the name disable product ID input and we’ll take this variable and Define it over here in the component.ts file this would be set to call we don’t want to disable initially and then what we want to do is whenever I’m clicking on edit at that particular time I want to set it to true this is what should happen so whenever I click on edit from this page and the row is getting populated over here at that time I want to disable it so let’s just save this and we’ll save this also now we’ll go to the browser once I click on edit and you see this is not at all editable this is disabled I’m not able to update any value in the product ID text box so after this what we want to do is we want to change some values over here let’s say I want to just up update the quantity available I want to update the reorder Point as well and I want to submit it if I submit it the backend update web API should be called and for that we’ll have to change the submit functionality over here we already have a function for submit button now this is currently saving the data this is currently doing what it is calling ing the post method of the HTTP client but we want to update the data now so for that we’ll have to do an HTTP put but when should we do an HTTP put we should only do it in case we are trying to submit when the text box product ID is disabled so that is when we should update the data otherwise when it is enabled we should be saving the data as we were doing earlier so that is why we’ll have to put a check over here this dot disabled product ID input is equal to equal to True at that time we should simply call the put method otherwise we should save the data so this should work as it is let me just format the document okay so whenever the product ID field is disabled it would call the put method otherwise it would call the Post method so let me just save it and now we’ll go to the screen we’ll click on edit making the changes again and you see the values are different from which were given earlier in the table so I click on submit now and it says form submitted successfully I click on okay and you see as soon as I clicked on okay this is showing me the new values over here so this is working perfectly fine we can see it in the table also the values are updated but as we have already put a fetch call on this particular table when we are submitting so it shows me the new data in real time because when I click on okay the fetch call is instantly made to from the back end now we’ll just do some minor changes on the application just to enhance the look and feel of the application what we want is when we click on okay on the alert box we want that the form should be reset so for that what we’ll do is we’ll come over here in the code what we want to do is we see that we are calling this particular function get inventory details whenever we are deleting the data whenever we are saving the data right so over here in this function we want to make a change whenever we are getting the fresh data from the table at that time our inventory data this particular data structure that is being binded to the form control it should be just reset so we simply want to set it to the new values and after this we also have this disabled product ID input right this should also be set to false because in case we have edited some data this would be set to True from this particular function right and it would only be set to false when we have explicitly mentioned in some function and as we are calling this function every time we are trying to refresh the table we should set it to false so this should work now we’ll go to the browser I’m just adding some new data now okay and I click on submit so this should add a new row and you see that the form controls are also getting reset let’s just try to edit something as soon as I clicked on edit product ID is getting disabled I’m only able to change the values from here I click on submit and you see that the product ID field is also getting enabled as soon as I clicked on okay on the alert box because the refresh whenever it is happening for the table it is refreshing the form controls with the product ID input as well so all the crud operations for the inventory page are now completed we are able to save the data we’re reading the data from the table and that is all happening in real time because as soon as we are making any updates like save delete edit we are able to call the read functionality as well so I hope all of you have understood whatever part we have completed till now now after completing all the crowd operations for inventory we’ll move on to the next component that we were going to complete for this particular application we had created two options over here in the drop down inventory and customers so the inventory component is completed with all the crowd operations now we’ll move on to the customers component we’ll be creating a new component for this in our code as of now if I click on this option nothing is being displayed except the header that is given in the app. component. HTML file so what we’ll do is we’ll go to the visual studio code and try to create a new component for the customer I’ll just stop the execution and what I want to do is NG generate component in the app. components folder where we already have inventory component I am creating a customers component as well so you see that the customer component is created over here this is the HTML file for it and as of now it is showing customer works so in the app. component. HTML file we want to have a router link for customer as well we already had for inventory now we want to add for customer over here in the customer option I’ll be mentioning customer over here and in the app component.ts we also want to import customer component and here it’s saying add import I’ll save this after this in the routes. TS file what we want to do is we want to give another p path we already have given a path for inventory now we want to give the path for customer as well so the this path the value of this path is going to be the same that we have mentioned over here in the HTML file so I’ll just take this and paste it over here so that there are no differences in the two values and after that we have to mention the component that we want to use so over here it is going to be customer component so sometimes the import is just done automatically I have saved this and after mentioning the New Path what I want to do is I’ll just do an NG serve again so that our application is running and we’ll go to the browser through the link okay now I’m going to the customers option so you see over here it says customer works that means we have successfully added a new component in our application for customer and we have added the router link for it as well after this what we are going to do is take a static HTML template for the customer I already have it referenced from the bootstrap and we’ll use it over here we’ll be pasting our static HTML template and after this I’ll just save it to check if the changes are getting reflected in the browser or not so we have come to our browser and we see over here that now the page is showing the new template on this page we see that we have a button to add a new customer then pertaining to each of the row we have edit and delete actions so now what we’ll do is we’ll give the functionality for this button first for adding a new customer because if you see over here in the inventory we had given the form like this on the inventory page itself that we could add the new row from here through this form and submit it right but in the customers we have added a little modification the reason is that you’ll be able to choose whichever template you want to and we just have a variation in our application so now what we want to do is when we are trying to add a new customer a new popup should be shown with the customer form that is the basic approach that we are going to follow over here and for that what we want to do is add a new dialogue component in our application so let’s go to the visual studio code and I’ll just stop the execution again I want to add a new component in the app components it is going to be customer dialog so this is what I want to add to this application this is a new customer dialog box and over here we have the HTML file for it now in this customer dialog box called component. HTML file we’ll be giving the form template for the new customer I’ll be using the one that I have already reference from the bootstrap and let me just paste it over here okay so you see that we have some input controls for customer information and then we have a add button over here let me just save this now when should this dialog box open it should open when we are trying to add a new customer right so in this customer. component. HTML we have the button over here when we click on this button it should open customer dialogue this is the function that we want to give in the customer.com component.ts over here we are mentioning the function and for this we’ll be using the model service that we had used for inventory. component. HTML file when we were trying to delete the record so let me just have a private model service variable created for it and we are trying to inject NGB model and for the inject we want to import the core module the options would be mentioned over here now after this we want to use our model service to open customer dialog box component this is what we are trying to acheve let me just save it and let me save here also the changes that we have made for opening the okay let me just give it the name customer not custom it and over here also the name should be customer okay after this let’s just run our app application okay go to the URL and now when we are going to customers when we click on this add a new customer button you see that the dialog box is opening so this is working perfectly fine that we are trying to open a new customer form through this button this is is a different approach that we have used to open the customer form over here we can enter the information and then click on ADD after this what we’ll do is we’ll be working on the functionality for this add button that should be saving the new row in our database so let’s just go to the database and over here we’ll try to create a new table for customer and I can give it the name customer details okay now after this The Columns that we have on our HTML one would be customer ID then first name we’ll give it 5050 okay and then we have last name email date of registration so let me just give it registration date and it could be of date data type I think we had another the customer HTML we can just check phone number yeah this is the one that we want to add okay got something over here the email spelling I’ll just save the changes so you see when you just keep on going through your Cod again and again you’ll just find some changes that you want to make to make it better phone right it was phone we’ll give it Vare only and could be off let’s keep it 15 digit however we want to save later on with the code or not maximum is 10 though now we’ll create the table and now what I want to do is I want to create a stored procedure it should be save customer details we are trying to insert the data in this table and these are the columns right so we’ll just mention over here we have to remove the data type in the insert statement and after this we want to just take these values and have them as parameters over here so but here want to have the parameter names but these should have the data types so let me just copy from here once again your code helps you to write the further code faster and now I’m giving the parameter names yeah just a syntax error that over here they should come the parameters before as keyword and we want to insert all of these in the table so I’m taking the names from here only and let me just give the character and to add the brackets for the values okay and also you might be wondering that how did I give the at theate character before each of the variables in one go so you press shift and ALT and then you just drag the mouse so you’ll be able to add anything so you could just add any character or delete any character so it would work for all of the rows so this is something interesting that I had learned some time back while working on a project in the office now we just want want to execute this query to create the new procedure okay after this what we want to do is we want to work on the API so over here I’ll just stop the execution of this solution and now you see that we already had the inventory controller correct we were working on this one for doing all the crowd operations for our inventory component now what we want to do is we want to add a new controller and this is going to be an API controller let’s select the empty one and click on ADD now it will request the name so we are going to give the name as customer controller and you see over here it has already mentioned the route as well from the inventory controller we just want to take the help of the first method that we had for saving the inventory data correct now we want to do a similar thing over here we want to save the customer data so this is going to be save customer data and for this want to create a new DET going to be customer D customer request D and after that over here we’ll be mentioning the properties and is going to be then it’s going to be the first name after that it’s going to be last name so you see intelligence is very helpful then we have email so that we have phone and then we have registration date okay uh we can give it date time I’ll just save this and use this customer request D over here the SQL connection would remain the same but we have a different store procedure now this is save customer DET also uh what we can do is we can keep it the naming convention same so I’m just dropping the to procedure once and we’ll create it again and we’ll create it again with the name Spore okay now it says commands completed successfully so we can check over here that in the store procedure we should have this particular store procedure as well so you see that we have got the SP save customer details and now let’s just work on our API the name of the store procedure is this one we have to take it from here and there are multiple parameters that we are working with so those also we can take it from here only one is the customer ID then we have post name then we have last name this is the one that we can use over here after that we have [Music] email and then we have phone and registration date so you see these are the different parameters that we are sending to the store procedure through the request detail that we receive from the front end so that part we’ll be covering later but as of now we have completed the coding for our web API so let’s just save this and we’ll run this solution okay so the solution is running now so you see over here we have got our new controller customer and and we have created a post method for it for saving the new records in our database let’s just try it out we’ll give the customer ID some random value and some random values for the email phone number okay let’s just keep the registration date as it is and we’ll be executing this you see we have got a 200 success response but how do we verify it we’ll go to the database and execute the query to select the data from this table that we have just newly created so you see the new record is successfully inserted into the table and we have completed the flow from the web API to the database successfully now we’ll be working on the flow for creating the connection between the front-end application and the web API let’s go to the visual studio audio code now and over here in the customer dialog box component. HTML file we’ll need to add a new function that is triggered when we click on the add button similar to the one that we had done in inventory component on this form I’m going to mention NG submit and call a function on submit for this function we’ll be writing the code for but before we proceed to write the functionality of this function what we want to make sure is that all the form controls that we have on this page they are matching with the ones that are required to be send to the web API so over here we’ll come and click on add a new customer so you see that we have first name last name phone number registration date at email but we don’t have customer ID over here so I’ll add a new text box for customer ID and one more thing we are going to do we’re going to make the changes so that the date is entered through a date picker and not in the text box so let’s make the changes for that over here I’ll just just add a new column so I’m adding it next to the email for now and this is going to be customer ID or let’s do one thing what we can do is just change this particular form control to phone number over here name should be same as this is email would be email only and what I want is that the customer ID should come over here so I’ll take this I’ll be taking this and add it over here and this should be customer ID the same name is given in the label then this is first name last name phone number and email so this is all fine now we need to change the registration date right so what we’ll do is we’ll give the type for this particular control that is registration date as date and the class would be form control only so I think this is fine I’ll just save it okay it says on submit is not there so for now I’ll just remove this and we’ll add it again once we are writing the functionality okay we’ll go to the browser and over here you see that we have a new form now we have customer ID added because we need to send it to the database for the row to be added for a particular customer then this particular registration date we had a text box in place of the date picker now we have a date picker and through the calendar we can just enter the date over here then we have first name last name name phone number and email so this looks perfectly fine now we’ll be working on the functionality for this add button let’s go to the visual studio code again and over here I’ll just save this and add a new function also over here so that the error is remove on submit I’ll say save it you see the error is gone now so now we’ll just start working on the onsubmit functionality we’ll have a API URL that we need to give and I’ll just mention it over here before that we have to write the HTTP options this is similar to the process that we followed for in entry details HTTP headers then over here we’ll find the properties for it authorization in case you have a token that could be passed through this and then we have content type that should be application slash Json headers are defined and after this what we want to do is we want to call the Post method of customer API so I’ll just take the URL from here itself because I know that I only need to change the controller name the rest of the API URL would remain the same so over here in the API URL I only have to change the controller name that is customer now for calling the post method what we need to do is have HTTP client defined over here we are going to inject the h HTP client and for this particular error we’ll need to do an import of angular code after this what I want is I need to call the HTTP client and we need to post so we are trying to call the Post method that is all good but we still haven’t defined what we need to send to the backend API to be saved into the database for that we’ll need to Define an object over here that would be mapped to our HTML page and would take the data from the form to the backend API so let me just Define customer details over here and we have several properties that we need to send first is customer ID then we have first name last name registration date phone and Emig okay so this is all of the information that we would be sending but how do we bind the data from from the HTML to this particular TS file for that I’ll just save this once and we’ll just take the name of this object over here we’ll come to the customer dialog box component. HTML file here we need to bind it so this is going to be through NG model and the value would be customer details customer ID and then we have name property that would be same as the one that we have in the object so similarly we’ll be giving the NG model for all of the control this is for customer ID then we have have registration date let me give the correct name over here and then we’ll give the NG model binding for registration date so this needs to be changed and the name would be same over here so let’s do it for all of the controls first name then similarly it would be [Music] for first name this is phone number and these are the two have given the property as phone so that is what we are keeping over here let me just show you confirm it once on the TS file phone right correct over here think we have done the bindings for all of the controls I’ll just save it once okay so you see that as soon as I saved it some errors have come we have done the binding but we need to import over here forms module and common module I think this should fix the error yes okay now we’ll be working on the post functionality we want to send this data to our backend API this do customer details then we need to pass the HTP options and we are going to subscribe to this HTTP post method just doing a console log over here for error we again want to do a console log but once this is complete what we want to do is you want to write the functionality for completion of this post method we are going to give an alert box that gives the message customer details SA successfully and which details are saved that we can show through json. stringify by passing the customer details over here so the functionality is all good we’ll just save it once after this we will go to the browser try to enter new customer information give some random values let me just give some random values over here I’ll click on ADD and it says customer details successfully saved saved successfully that is the message that we had given and over here you see this is the object that we are passing to the backend API and now generally when we are developing an application for the end user we don’t show what particular data they have sent to the back end right because they don’t want to see a Json being shown to them in the message box this is for our convenience that we are able to see what all data has been sent and this is just for development purposes so I’ll click on okay but we need to confirm that all of the data that we were trying to send has been already saved in the database once we have got the alert box so for that we’ll just go over here and I’ll click on execute so you see whatever data we sent this was all random data we just sent some random values from the front end and those are all saved successfully into the database so the save functionality is working perfectly for the new component that we have created that is customer we can start working on the get flow of the application but first of all we’ll go to the browser and check at which particular point we want to retrieve the data so the get flow should happen as soon as I click on the add button the first thing that would happen is I would receive a message that the customer details are saved successfully after that the popup should close that is one more thing that we have to add and once once the popup is closed this table that we see on the browser it should be updated with the new record in the table that is there in DB so we have to add the get flow as soon as we click on the add button and after we receive the successful response and whenever this page is loading so let’s say I’m coming to customers this page right currently we are seeing some static data so this should not happen we should be able to see whatever data is there existing in our DB so we have to add the get flow at two places so let’s see how we’ll do that but first of all we have to complete the flow for add functionality once we have gotten the successful response we want to close the dialog box for adding a new customer and we want to do it in the complete function so for that we’ll be giving the model do close functionality but first of all we’ll have to define the model model over here through inject I want to inject NGB active model and this we’ll be using over here this do model Dot close and once this is closed we’ll be taken back to the customer page over here so now let’s try it I’ve saved the record I’ll give some random values marks phone number let me just give a random date I’ll add it says customer detail saved successfully click on okay and you see that the model is closed and we can confirm that the data is saved by executing this particular query so you see a third record has been entered after this let’s try to create the get flow from the table we’ll be creating a procedure get customer details just following our naming convention so adding Spore and then simply we have to select the customer details in this store procedure I click on execute it says commands completed successfully that means the store procedure is created so if I just try to check in the store proced procedures over here it is added now so let’s go to our web API solution stopped the execution and just taking the help of already written function for saving the data now what we are doing is we’re trying to get the data give it the appropriate name we don’t want to pass any request over here and then the store procedure name would be get customer details after this we don’t want to pass any parameters to the store procedures and once the connection is open we want to execute Reader through SQL data reader and while the equal data reader is reading what we want to do is we want to take all of the data that is there in the result set and create an object for it so I’ll just add a new model customer D and I’m taking the help of customer request dto over here to define the properties because these are going to be similar to the ones that we defined in customer request d once this is done over here I want to create a new list of customer video customer details or let me just name it customers yeah and then what we’ll do is create a D2 that would hold the single record and once that is done I want to assign each of the property the value from the table so this is going to be convert do string we have a reader column name is customer ID okay got it customer ID is integer and similar to customer ID we have first name that would be string column name should be over here then we have multiple columns one of them is last name then we have phone we have email and another is registration date got it um this is going to be time this is taking registration overhead email and then okay so I think we’re all done with assigning a single row to this particular object now what we have to do is we need to add the customer D to customers and once this is done need to just convert this object to Jon and send it as our response from the API so this is customers this is the response that we are sending through the get customer data I’ll just save all of it and we’ll run this solution so this is running now and over here you see that we have a get method added to our customer controller and we can just try it out I’ll click on execute and we are getting the response perfectly all of the data that was there in the table we are getting it as a Json in the response body and this is the same URL that we used for post just that we are making a call to different method every time through the same URL so now that this flow is completed to get the data from the DB to the web API we just need to work on the flow from the front end to the web API and we’ll be able to see the exact data that is there in the DB on our UI application so let’s complete the get Flow by going to the visual studio code and over here what we’ll be doing is we need to fetch the data on the load of the customer component right so we’ll go to the customer component.ts file and we’ll be just mentioning what we want to do in NG on in it over here we want to get the data let me create a separate function similar to the one that we had done in inventory component we are going to get the customer details and this function we’ll be calling over here now here we need to specify which particular URL we want to call for getting the customer details so we’ll just take the AP URL from here after mentioning the URL what I need to do is have HTTP client mentioned over here and we’re going to inject HTTP client so this we need to use in our function to call the get method and we’ll pass the URL we are subscribing to the method now when we are subscribing to the get method we will need to assign an object with the result that we receive from the API so let me just Define an object going to be customer details of type any now what I want is that once I received the result from the API this do customer details should be assigned at result oh I think we’re good over here once we receive the data from the get method we are assigning the customer details the same now in our customer. component. HTML we already have static data that is there in the table this will be just replaced with the dynamic data that we are receiving from the web API so this is the static data over here what I am doing is just defining a dynamic TR and we are going to iterate through ng4 let customer of customer details this is the object that we created let me just take the help of the static data and over here as of now I’m removing all of the static values and we’re also removing the static rows that are there in the table as of now I’m keeping the bindings blank because let’s just see which particular properties we’ll be binding on the HTML page so what I’m doing is just doing a console log of customer details saving this and over here also we save it okay now let’s just go to the browser currently you’re able to see that on the browser all of the static data is removed from the table and we’ll just do an inspect and go to the console over here I’m getting an error also can’t bind ng4 okay so to remove this particular error what we need to do is in our customer. component.ts we’ll be import supporting foron module I’ll save it and then we’ll go to the browser again so you see that the error is removed and now we are able to see that the records are there but we are not seeing any value because we have not done The Binding yet but on the UI we are able to see number of rows that are there in the table right you see that edit and delete these are static values so three rows are generated in the table but we are not able to see the values because currently we have not done The Binding right and for The Binding what we need to see is which particular property we need to bind because this is the value of customer details we cannot have the camel casing done in the property this property is starting with the capital c so this is exactly what we need to bind and that is why we we have not done The Binding yet but now that we know that we don’t need to use the customer details similar to this one like we have done in the customer dialogue box we need to bind it directly to what we are receiving from the web API so for that what we’ll do is now we can come over here and just have customer do customer ID so this is the value that we are binding from the back end we are doing this for every column is going to be customer Dot and then we just check our browser then it is first name last name phone registration date and email all starting with the capital laters this is what we need to B customer ID customer name and now over here in the customer name what we are doing is we’re giving the first name and last name together so as to just concatenate and show it on the screen email this is a very important thing that that we just went through to check which particular property you are binding is if we had just used the one that we had done in customer dialog box component these were all with camel case because this is what we had defined over here but we are not binding it as per the TS file we are binding It Whatever response we are receiving from the back end and now the next is is I hope you have understood this particular concept properly and now I’m just saving it going to the browser again and you see that we are able to see the data whatever data was there on the back end in the table you’re able to see it perfectly so the get flow is working perfectly fine if I just try to add a new customer if some random values over here click on ADD so it says that the customer details are saved now when I’m coming over here you see that this is not getting updated so this is the second place that we had already discussed earlier where we need to add the get flow so let’s just go to the visual studio code so in the visual studio code we’ll just go to the flow that is there right we are trying to open the data from the customer. component.ts over here and once the model is open we we enter some data into the form then we just call the Post method of the API once it is successfully saved we are closing the mo model so when we are closing the model what I want to do is send back a result to the customer component and how do I do that over here on the close we’re just sending a result closed so this this is the result that would be sent back to this customer component I’m saving it and now once that is done I want to go to the customer component and over here in the open function I’m taking the result once I received the result I want to perform a function now what I want to perform is I I want to check first of all if the data that we have received and there is event property in it is it equal to the one that we have sent back from here you see that this is the property that we are sending right event value is closed so that is what I want to match over here and if it is matching then we should just call this do customer get details so you able to see that this is the second point we are calling the get customer details function first for that we are calling it on the initialization of the page whenever we are coming to this particular component we are calling the get method and then once we are closing the popup after saving the data successfully at that time also we’re trying to call it so let me just save it and we’ll go to the browser again now this is reloaded so all of the get flow is working fine on the customer initialization but let’s just try to add a new custom entering some random values again I’m clicking on ADD it says successfully saved and you see now the data is getting refreshed as soon as the popup is closed because we have confirmed from the dialog box that we are closing the popup and then once we come back to the customer component it is checking if we have closed the popup so at that time we should just update this particular table with a new record that was entered so I hope all of you have understood that we have completed the get flow for this customer component at the two places that we wanted to after this what we’ll do is we’ll work on the delete functionality for this customer component for the delete functionality let’s go to the database and we’ll try to create a store procedure P underscore delete customer detail and now what we want to do is delete from customer details table but if I just write this query then all of the data from this table would be deleted and we don’t want that we want to delete for a particular record let’s say I have selected this record and trying to click on delete button so only this particular record should be deleted so for that we’ll be choosing customer ID as our constraint to delete the data from this table so this is the check that we are going to put on over here what I want is that particular record should be deleted where customer ID is equal to and the check should be according to this parameter that we would be passing to this procedure so wherever the row is matching with the parameter that is passed to the store procedure that particular record should be deleted I’ll click on execute and now the store procedure is created in the database if I just refresh and we are able to see that this thr procedure is added now we’ll go to the net code for our web API what I’ll do is I’ll just take the help of this function and we are writing an HTTP delete method and the name would be delete customer data now I don’t want that the whole request dto is passed I don’t want the whole customer data to be passed to the backend API I just need the customer ID from the front end to be passed to this web API and we are keeping the connection string same the store procedure name would change over here we have the name so we just use it and I’ll remove all of the other parameters we are going to pass only this parameter which is customer ID now we have our delete customer data function ready once the connection is open we are just trying to execute the store procedure and then we are closing the connection after this we are sending the okay response so I think the whole function is ready we can just try it out by running the solution so over here you see that for the customer controller we have have a new web API that is delete method and if I just click on delete we are seeing that we need to pass the customer ID so if we are able to try it out we’ll have to enter a customer ID over here for that what we’ll do is we’ll just click on execute once and see what all data is existing in the customer details table now we have five records over here and I want that this random values that we had entered earlier right this this should be deleted so I’ll select this customer ID and we’ll go to the browser click on execute we have got the 200 success record and now if I just execute this query again we see that only four records are existing now all of the data that was there earlier it has been deleted and what we can do is we can just refresh this page and we are able to see that only four records are coming over here one we have already deleted from the backend web API so the backend flow is completed for the delete method now we’ll just work on frontend to web API connection and then we can just click on this delete button and we’ll be able to delete the data from the UI as well so for that we’ll need to write the code for this button let’s go to the visual studio and over here if we just check customer. component. HTML file over here on the HTML file this is the delete button that we want to add the functionality to but we don’t directly want to just delete the data because what if the user has mistakenly clicked on the delete button right so we want the user to confirm if they are sure to delete that particular record for that what we’ll do is we have giving a function open this is not going to be customer but confirm dialogue that the user should confirm if they are ready to delete this data and have this function created in the TS file as well now what this function would do is it would open the model and that is going to be dialogue component so I hope you all remember that we have already used the dialog component in the inventory component as well and it would just open it first of all we are just trying to open it okay and then we’ll see what happens save it here and here also we’ll go to the browser and now let me just click click on delete button so we see that we have successfully opened the confirmation dialogue box from this delete button but what should happen if I click on cancel nothing should be deleted so that is working perfectly fine because we have already written the functionality for the cancel button earlier but when we are clicking on okay then the record should be deleted right so that is the pending portion over here that we are going to write the functionality for deleting the record record of the customer when we click on okay and how do we accomplish that when we were clicking on okay we were sending the event as confirm from the dialogue box so that is what we would accept on the customer component now and then delete the record let’s just go to our solution over here on the visual studio code and over here we can see that we are sending a confirm event from the dialogue box and in case we click on cancel at that time what is happening is it is simply closing the dialog box so in the event that the user clicks on cancel nothing would happen but when the user click on okay at that time the confirm function is getting called and we are sending the event as confirm so that is what we would accept over here also we can take the help of inventory component right now and just use that code over here so what I want to do is I just want to have the result now of the dialog box in the customer component if I’m opening the dialogue box we are taking the result and then we will be deleting the customer this is what we are going to do so let me just have a function created for it need customer details and this is the function that we want to call when we are receiving the event as confirm only if the user has confirm then we are deleting the record now let’s just give the functionality for deleting the record which is the URL that we are going to take over here that would be from the browser itself over here you can see that we have this URL and this is the one that we’ll be putting over here now for the delete functionality we have already made sure that a check would be passed for the wear clause and that would be customer ID so this is what we require over here in this function to be passed to the delete method of the HTTP client but how do we get that particular customer ID that would be passed from the HTML this is the customer ID and this needs to be passed to the function that we are trying to call from the TS file so we accept it over here and then can simply pass it to this function we just save here also after this we need to pass this customer ID with this URL for that we’ll be just using HTTP client all the delete method pass the API URL with customer ID and we are subscribing to the method so after saving the changes we’ll just go to the browser and if I click on delete it says are you sure you want to delete the record I can cancel it so nothing is happening now if I just click on okay on this confirm box currently also nothing is happening but if I just check over here in the DB has the record been deleted so yes the record is deleted successfully but on the UI we are not able to see it why is that because we have not refreshed the table after deleting the record from here so for that what we’ll do is in the visual studio code when we have subscribed right when we are getting the result result from the delete API at that particular Point what we want to do is just call get customer details method now I’ll save it we’ll go to the browser again and I just add some random values over here because I want to delete this random data click on uh and now I want to delete it so I click on okay and you see that the table is getting refreshed so the delete functionality is working perfectly because after we have deleted the record we are refreshing the table as well and that is all Happening by just passing the customer ID from the HTML page so I hope all of you have understood the delete functionality that we have covered till now after this what we we’ll be doing is we’ll be working on the edit functionality but before proceeding on it we have to make a minor change over here you see that on the table that we are seeing on the UI the registration date is having the time also that is because we had kept the variable as date time in the net web API so for that we’ll be making the changes over here we need to change it to string so let me just make the registration date as string and then this could be convert. twoing we’ll save the changes and in the store procedure when we are fetching the details we need to make sure that string is being fetched from the table so this is a conversion technique that I am explaining to you and this is very helpful when we are working on the store procedures because generally you would have data in your table in some format but you need to get it in some other format so for that we can cast the data now just to fetch the column names I am selecting the table and doing alt F1 on the keyboard this gives me the data definition for the table we can take the column names from here and what I want is add a comma Now for the registration date as V yeah and we can keep it 12 as of now and the column name can be registration date only so why I have to mention all of the columns separate separately because I want to perform a cast on a particular column so if we are just putting a star with the select keyword we’ll not be able to put cast function on a selected column for that we have to mention the column name separately over here now we are altering the procedure I click on execute and it says commands completed successfully to verify that our changes are working perfectly fine we can just execute this store procedure in the database so now this is giving me records over here in the same format that the table is there but this would be now Vare so what we can do is just go to the solution and run it once and now that it is running over here in the get method can just try it out I click on execute and you are able to see that the registration date that we are patching now from the table it is not having a Time associated with it otherwise it had assigned a default time in the net code so now we’ll go to the browser and just refresh the page over here you see that the registration date is is coming without the time so this is what we were intending to do and we have achieved it now after this we can move on to the edit functionality as well so for the delete functionality let’s first go to the database to create a store procedure now we are creating a procedure to update customer details and what we’ll be doing here have an update query or customer details table now in the table we know that we have some columns right customer details these are the columns that we have so as we have selected earlier customer ID column for deleting the record so this seems to be the appropriate candidate to edit the records as well so we will be using this in the constraint when we are trying to update the record and these are the remaining columns that we’ll be updating the values for so whatever data we are getting from the front end all of that we’ll be updating in the store procedure over here I want to update first name but what do I want to update the first name with I will have to pass a parameter for the first name to this store procedure and similarly for all the remaining columns those parameters would be passed I’ll just take the column names from this table these are the column names that would be passed we do need to pass the customer ID as well because how would we update the record without passing the customer ID this is of type in then we have B care this was I think 50 then the same we can keep for the last name email registration date can be date only and then we have phone which would be just vard for now okay after this what we are going to do is set the first name with the first name that we have received as a parameter last name then we have email registration date and then the last is phone so all of these we are updating but which particular record we want to update it for it is only when customer ID is matching with the one that is pass from the web API customer ID so the parameter that we receive in the store procedure if the records value is matching with it then we want to update all of these columns so this is the update query and that we’ll be using in our store procedure for updating the customer details I’ll click on execute so the store procedure has been created now let’s go to the web API I’ll stop the execution so we can take the help of inventory controller and just use the update function to write the same for customer as well over here it’s going to be HTTP put request and then we have update customer data here we are passing customer request DT and the store procedure name will be taking from here now we want to pass all the parameters here for the customer details so those can just take from the Save method and this was D can be changed to customer request all of the parameters are also set now we just have to execute the store procedure and whatever values we are passing those will be updated accordingly through this SP now let me just save it and we’ll run the solution now that the solution is running we can just go over to our database once and check over here which particular record we want to update so I’ll just select this one and we’ll go to the browser so you see over here that a put request method has been added can try it out now these are the values that we need to pass so the customer ID would be the one that we have selected we’re keeping the names same only and for the email what we’ll do is we’ll change the email over here let me just copy the phone number or what we can do is just change the phone number rather than the email and this date also can remain the same and I’ll execute it we have got a 200 success response now we can verify our data for this particular customer in the DB you see that these are the updated values that we have sent we have changed the phone number only here and in the DB if you see this is a old phone number that we had so I’ll just have a query on a different query editor and execute it over here we are able to see that this is the new phone number that we have given from the web API and this is updated correctly through the update method over here this is the old one that we had in the table so we have built the connection from the web API to the DB and the update method is working perfectly fine what we’ll do is we’ll go to the visual studio code to make the changes for the front end to web API connection but before that let me just go to the UI once again we have the edit button over here and for the inventory what we had done is we had a form on the page itself which we were populating when we were clicking on the edit button but now we have a dialog box when we are adding a new customer so what we want to do is this is a very interesting portion we want to populate this particular dialog box when we click on edit Button as soon as I click on edit the popup should open and this popup should have the values prepopulated from the record so I can change the values from here by entering some new values and then I’ll click on save or update that should update the record in the DB and I should have a fresh data over here on the table so this is what we are trying to achieve let’s see how we can do that so we’ll go to the visual studio and over here you see that this is the customer component.ts the customer component. HTML is having that edit button right so we need to have a button action related to this when we are clicking it we want to open the edit dialogue box for the delete what we were doing is opening the confirmation dialogue box now we want to open the edit dialog box and this is the function that we’ll have to create over here what this should do is now in this function we are using the model service to open customer dialog box component now I’m able to open the customer dialog box component through this particular statement but how do I pass the customer information over here on the HTML you see that we have a row associated with the customer and when I click on edit this particular information should be passed so this is the customer data that I would need to pass to the customer dialog box component and when we are passing it first of all we need to be able to receive the data in customer dialog box component so for that what we’ll have to do is over here we are taking it as input defining a private customer variable of type any and just import angular core now I’m saving it once done what we have to do is when I’m clicking on edit and folling this function I should be passing the customer whole information needs to be passed for the delete we had only passed the customer ID but now when I am updating I would need to require to pass the whole customer object save it okay so it’s giving error because we need to accept it also in the function I’ll save it again error is gone so I’m able to receive the information in this function but now I need to pass it to this component and for that what we’ll do is just Define this as a const model reference giving it a random name and model reference component instance property this is what we need to Define over here in the component instance we have to give the exact name of the property that we defined over here so as soon as the dialog box is initialized customer value would be set from here and over here we need to give the object first is the customer ID property then we have first name first name name em registration date the last is phone so we have set all of the values all the properties have been defined over here you could wonder that why we have not taken the names over here of the properties as camel case because over here we are accepting it because this is being accepted over here and even though it is of type any I am just making sure that it is matching with the object that we have already used in the customer dialog box component but over here we have to use this name with the capital letter in the starting because this is what is being used on the HTML page this is the one that we have been receiving from the web API and we have directly mapped it on the HTML so you have to make sure that all of the property names you are giving correctly for the application to be working perfectly then after this what we’ll need to do is I’ll just save this once over here when we have got the data of the customer we need to map it to the HTML right when we go to the HTML we see that we already have a binding in place for customer details so what we can do is we can utilize this customer details object only and initialize it with this value if we are updating a record and how do we do that we have okay we don’t have NG in it in this class currently so I’ll add it in the NG on init function what we need to do is this do customer details it should be set to customer but should it be set every time when the object is getting initialized no it should not be it should only be initialized in case we are receiving any data in this particular object that is customer so that means when we are trying to edit only that time it should be initialized with this value now what I can do is I can give an if condition customer is not equal to null at that time we need to just set this customer details with this value I’ll save it and now we’ll go to the browser ones over here it’s refreshed already after saving I’ll click on edit so you see that we are able to perfectly get the data from that table into this particular popup that record is populating on the dialog box but this add label is not looking very appealing over here because we are not trying to add any data we’re trying to update the record so what we can do is we can update the text as well for the button and one more thing we’ll need to do is just similar to inventory that we need to disable the editing of this particular text box when we are trying to update the record because this is the constraint that we are using at the back end to update the record we cannot change its value this is similar to the inventory component that we have achieved now we’ll be disabling it over here as well when we are trying to open the dialog box for updating a record so let me just go back to the visual studio code and over here in this customer dialog box component when we are setting the customer details with customer at that time we are trying to update the record right so over here we’ll make the changes but uh we’ll check the HTML first in this the label is set as static currently right so we can give some value over here dynamically for that let me just Define a variable button text string so it can be initially it can be add okay so this is the initial value that we are giving that is a default value and this is what we can use over here and just save it now button text should be set as dat I’ll just save it go back to the browser over here when I am adding a new customer at that time it is ADD so it is taking the default value but when I’m editing it it’s coming as update so this is working now we’ll make the changes for disabling over here where we have defined button text can give AOL value for disable customer ID input so initially it will be false I don’t want to disable it initially but as soon as I’m trying to update it should be said to true and we’ll take this over here on the HTML page customer ID disabled is being set through this variable I’ll save it now we can check the browser again so when I click on edit you see that this is not editable right now so this is also working perfectly now we have made the required UI changes for our update dialogue box and the add dialog box is also working perfectly now over here we have to make the changes to send this data to the back backend now we’ll go to the visual studio now in this component we need to make the changes to update the data right if we check the button for editing this is the button that we are using right but this is the button that we are using for saving the data as well so what we’ll need to do is we’ll need to make the changes on this button functionality only on submit is the function that is being used for that button click and now I need to add a check which can make sure that either the user is trying to edit the record or save the record so we already have made the changes for these two variables to verify if the user is trying to edit or update so we can take any of these I’ll take the bo one and over here if this is true at that time I should edit otherwise I should just save the record and that save functionality is already working through post method okay now for here in this if we need to have the functionality for or put so I can just take the help of this code we are trying to call the put method the API URL Remains the Same we’ll be passing the customer details only because this is set through this function when we are trying to update the data and we can just update this message and then we are closing using the dialog box as soon as we click on the okay for the alert box so this is also perfect I’ll just save it and we’ll go to the browser now on the UI I’ll click on edit for this record and I am updating the phone number again let me give it a different value so that it is easier to remember okay it starts with 3625 I click on update and it’s not updating over here but let’s just verify on the DB ones this is the old value I click on execute again so we are getting the new value over here that means the API is working perfectly but it’s not showing on the UI over here let’s just check the code now C customer dialog box component we are sending the event as closed in the customer component when we were opening for adding we were receiving it got it that over here we are not receiving the result because in open customer dialogue we have been receiving the result we are checking if the event is closed then we are refreshing the table so this statement we have to just take and add over here in model reference result then and we have got the result from customer dialog box component then we are checking if the event is closed then we are refreshing the table save it we’ll go to the browser again now over here we are seeing the refresh data because after saving the page always reloads right so now just let me click on edit and give it a new value this one only and then click on update so it says this is updated now and now we are seeing the new value over here so this is working perfectly fine now if I have the old value I click on edit enter some new information and it is updated successfully over here so the table is also getting refreshed as soon as I am clicking on update over here and for the ad also if we are adding a new customer then we don’t have this text box disabled and the button displays add only so I hope all of you have understood the crud operations that we have completed for inventory and Custom customer component we did some UI enhancements as well and some additional features that we have given to the application to make it perfect for the end user now this was the last video for this particular application will be coming out with the new application soon thank you

By Amjad Izhar
Contact: amjad.izhar@gmail.com
https://amjadizhar.blog

Affiliate Disclosure: This blog may contain affiliate links, which means I may earn a small commission if you click on the link and make a purchase. This comes at no additional cost to you. I only recommend products or services that I believe will add value to my readers. Your support helps keep this blog running and allows me to continue providing you with quality content. Thank you for your support!

Angular .NET Full Stack: Inventory and Customer CRUD Tutorial