Tech Seeker

The main objectives of this article are: Implement HTTP Post Create Action Method In API Implement HTTP Post API Call At Student Service In Angular App Student Component Implement Logic To Create A New Student Implement HTTP Put Update Action Method In API Implement HTTP Put API Call-In Student Service Student Component Implement Logic To Update An Existing Student Implement HTTP Delete Action Method In API Implement HTTP Delete API Call At Student Service Student Component Implement Logic To Delete Student Implement HTTP Post Create Action Method In API: Let's try to create a new student record into our database by implementing the HTTP Post Action Method(or Create action method.) in our 'StudentController'. API_Project/Controllers/StudentController.cs: [HttpPost] public async Task<IActionResult> Post(Student.Api.Data.Entities.Student payload) { _myWorldDbContext.Student.Add(payload); await _myWorldDbContext.SaveChangesAsync(); return Ok(payload); } (Line: 1

The main objectives of this article are: .NET6 Web API Install .NET6 SDK Create A .NET6 Web API Application. Entity Framework Core Install Entity Framework Core NuGet SQL Connectionstring Setup Entity Framework Core DatabaseContext. .NET6 Web API: Web API is a framework for building an HTTP service that can be accessed from any client like browser, mobile devices, and desktop apps. In simple terminology API(Application Programming Interface) means an interface module that contains a programming function that can be requested via HTTP calls to save or fetch the data for their respective clients. Some of the key characteristics of  API: Supports HTTP verbs like 'GET', 'POST', 'PUT', 'DELETE', etc. Supports default responses like 'XML' and 'JSON'. Also can define custom responses. Supports self-hosting or individual hosting, so that all different kinds of apps can consume it. Authentication and Authorization are easy to implement. The id

The main objectives of the article are: .NET API And Angular Application Communication. Install SQL Server And SQL Management Studio. Create SQL Database Table .NET API And Angular Application Communication: User request the angular application(Single Page Application) then js files are downloaded and then runs the browser. Since Angular is a single-page application, it depends on API for data to display. API runs at the server that gives JSON response. API communicates with the database for fetching the data. Install SQL Server And SQL Management Studio: First, install SQL serve in our local machine. So go to line 'https://www.microsoft.com/en-in/sql-server/sql-server-downloads' and then install the developer version which is free and fully functional. Next, install the SSMS(SQL Server Management Studio) IDE at 'https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms' Create A Database: A Database contains a collection of tabes

In this article, we will implement a small angular application about item sorting using the angular material drag&drop. Key Notes About Angular Material Drag&Drop: Let's know about a few key things on angular material drag&drop like: DragDropModule load from the library '@angular/cdk/drag-drop' The 'cdkDrag' attribute makes an element draggable. The 'cdkDropList' attribute on an element that surrounds a set of 'cdkDrag' elements groups the draggable into a reorderable collection. So it creates a boundary of the region for dragging. The 'cdkDropListDropped' is an event fired after dipping the item. Create An Angular Application: To accomplish our demo let's create a sample angular application. Command To Install Angular CLI: npm install -g @angular/cli Command To Create Angular App: ng new your_app_name Now let's install angular material into our application. Command To Install Angular Material: ng add @angular/mate

In this article, we are going to understand the usage of Bootstrap(V5) Modal in Angular(V13) applications. Create An Angular Application: Let's create an angular application to accomplish our demo. Command To Install Angular CLI: npm install -g @angular/cli Command To Create Angular App: ng new your_app_name Install And Configure Boostrap(V5) Install the Bootstrap NPM package. npm install bootstrap Now 'angular.json' file configure boostrap 'CSS', 'JS' references. Bootstrap Modal Usage: Let's implement a small sample to understand the usage of Bootstrap Modal. src/app.component.ts: import { Component, OnInit } from '@angular/core'; import { AppService } from './app.service'; declare var window: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { formModal: any; constructor() {}

In Par-1 we had implemented a basic angular authentication using the HTTP only cookie. Now we are going to enhance some features like 'Authentication Guard', 'HTTP Interceptor To  Refresh The JWT Token Inside The HTTP Only Cookie', 'User Logout'. Angular Route Guard For Authentication: Problem 1:- After successful authentication, we reload our angular application, or the user closes the browser and then opens again, we can see our user information will be lost. Problem 2:- Currently with our sample application, we can access any page means, if the user is not logged in also can access the 'dashboard' page, similarly if the user logged in can also access the login form page. Solution:- Implementing Angular  Route Guard for authentication. In 'AuthService' let's add logic to load the authenticated user information either from the 'AuthService.userProfile' variable or from the browser local storage. Because if the application is rel