Tech Seeker

In this article, we are going to implement pagination using angular material in a sample angular(version 12) application. Create A Sample Angular Application: Let's create a sample angular project and also install the angular material package. Install Angular CLI: npm install -g @angular/cli Command To Create Angular Application: ng new your-project-name Command To Install Angular Material Package: ng add @angular/material API: Here I'm going to use a sample pagination API that I had created. Here I will show the sample response to gain the basic idea over the API. Create Response Models: Now let's create models to read the API JSON response. ng g class models/todo.model ng g class models/todo.paging.model models/todo.model.ts: export interface TodoModel { id:number; itemName: string; isCompleted:boolean; } models/todo.paging.model.ts: import { TodoModel } from "./todo.model"; export interface TodoPagingModel { data: TodoModel[], totalC

In this article, we are going to implement pagination in the Blazor WebAssembly application using the MudBlazor UI table component. Pagination API: To accomplish our demo we need an API endpoint that contains a payload to support the pagination. If you have good knowledge of API pagination you can create your own API or else I have already created a blog on API pagination, so  click here  to know more. Create A Blazor WebAssembly Project: Let's begin our coding by creating a sample Blazor WebAssembly project. Steps To Configure MudBlazor: Let's install the 'MudBlazor' NuGet into our sample project. Now add the MudBlazor namespace into the '_Import.razor' file. _Import.razor: @using MudBlazor Add the below CSS files inside of the head tag of the 'index.html'. wwwroot/index.html: <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content

In this article, we are going to implement a sample demo on pagination in .Net5 Web API application using Dapper ORM for database communication. Create A Sample Table: To accomplish our demo let's create a sample table. CREATE TABLE [dbo].[Todo]( [Id] [int] IDENTITY(1,1) NOT NULL, [ItemName] [varchar](max) NULL, [IsCompleted] [bit] NOT NULL CONSTRAINT Pk_Todo PRIMARY KEY (Id) ) Create A .Net5 Web API Application: Let's create a .Net5 Web API application to implement our pagination. Specify the project name and solution name Select target framework a .Net5 Create Table Model and Pagination Response Model: Now we need to create to models like 'Todo'(Table Class) and 'PagingResponseModel'(Class that  used as API response model which contains all pagination properties). So let's add a new folder like 'Models' and our 2 classes inside of it. Models/Todo.cs: namespace Dot5.API.Dapper.Pagging.Models { public class Todo { public

In this article, we will implement an IdentityServer4 to protect a Web API with client credentials. Client Credentials Flow: Client credential flow suitable internal communication between that application. In this flow application request the IdentityServer jwt access token to consume the protected API resources. Client Credential flow requires 'ClientId', 'ClientSecret' for authentication. Clients are applications that want to consume the protected API by the IdentiyServer. Each client should register with IdentiyServer. So IdentityServer stores client information like 'ClientId'(unique identifier), 'ClientSecrets', 'Scopes' etc. So clients using 'ClientId', 'ClientSecret', 'Scopes'(optional) can request the IdentityServer as a trust client to get the JWT token. Protected API's are registered under IdentityServer as 'ApiResoucers' with set of 'Scopes'. So any client to access the protected API, then cl

In this article, we are going to implement an Angular application state management using @ngrx/data. @ngrx/data: In a general angular application using NgRx Store, Effects, and Entity libraries made us to write a huge number of actions, reducers, effects, selectors, HTTP API calls per entity model. It leads to a lot of repetitive code to create, maintain and test. Using NgRx Data we can reduce our code to very little despite having a large number of entity models in our application. The NgRx Data is an abstraction over the Store, Effects, and Entity that radically reduces the amount of code we have to write. By gaining the abstraction benefit, we are going to lose our direct interaction with NgRx libraries. Ngrx Store Flow: Using Ngrx we never contact the store directly, every store operation is carried out by the NgRx store implicitly. Our main point of contact is EntityCollectionService. Using EntityCollectionService for each entity can invoke API calls with default method like '