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 understand the steps on JWT authentication implementation in Angular(Version11 used in this sample) application. Here our main focus is on authenticate users using the JWT access token. What Is JSON Web Token?: JSON Web Token is a digitally signed and secured token for user validation. The jwt is constructed with 3 informative parts: Header Payload Signature Create A Sample Angular Application: Let's begin by creating a sample application in which we are going to implement JWT authentication. Command To Install Angular CLI: npm install -g @angular/cli Command To Create Angular App: ng new your_app_name Command To Install Angular Material: ng add @angular/material Angular JWT Library: JWT library to decrypt the user info within the JWT access token. Command To Run Angular JWT Library: npm install @auth0/angular-jwt Integrate Login Module: Let's create all login files like the below structure. src/app/login/login-route.module.ts: impo

Precap: Part-1: Angular Material Drag And Drop UI Component(Part-1) Part-2: Discussed on cdkDropListConnectedTo directive. Discussed on cdkDropListData directive. Discussed on transferArrayItem method. Discussed on cdkDropListGroup directive. Angular Material Drag And Drop UI Component(Part-2) cdkDropListEnterPredicate Directive: A predicate is a function that returns boolean results either true or false. cdkDropListeEnterPredicate directive accepts a predicate as an input. So on dragging and dropping of an item into a container will be accepted based on predicate output, if the predicate returns true dropped item will be accepted by the container or if the predicate returns false dropped item will be rejected by the container. So by using the cdkDropListEnterPredicate directive, we can control the items that will be dragged and dropped onto the container. Sample Example To Control Items Drag And Drop Using cdkDropListEnterPredicate Directive: Let's first implement a sample of dra

Part -1 Precap: Introduction to drag and drop Angular Material CDK. Discussed cdkDrag Directive Discussed cdkDropList Directive Discussed the cdkDropListDropped event. Some simple examples Click here for full details of part-1. cdkDropListConnectedTo Directive: cdkDropListConnectedTo directive helps to drag and drop of items between the multiple cdkDropList instances. The communication between two different cdkDropList established either by assigning the cdkDropList template variable to the cdkDropListConnectedTo directive or by assigning the cdkDropList Html element id value to cdkDropListConnectedTo directive. cdkDropListData Directive: cdkDropListData Directive takes input like a component object that will render as Html Element items in cdkDropList instance. By assigning a component model object to cdkDropListData, makes our data to available in CDK drag and drop instance for sorting the data on each drag and drop of elements. transferArrayItem method: transferArrayItem method get

Angular Material Drag And Drop CDK provides a set of rich functionalities like as below: Able to apply to drag functionality on any HTML elements with free motion over a page Sorting list of HTML rendered items. Custom drag handlers Custom drag place holders Limit the area to drag for an item. This article is a series of parts where we going to discuss and understand all the features provided by drag and drop CDK. Create An Angular Sample Application: To understand step by step implementation of drag and drop functionalities, let's create a sample angular application. Command to create angular application: ng new your-project-name Command to install angular material package: ng add @angular/material Import DragDropModule: DragDropModule is loaded from '@angular/cdk/drag-drop' package. Now we need to import this DragDropModule on to the NgModule of the app module to get all features of it. src/app/app.module.ts: import { DragDropModule } from '@angular/cdk/drag-d