Tech Seeker

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

In Angular Material Version 10, announced a new feature in date selection is Date Picker Range Selection. Before Angular V10 for date range selection need to write custom code or need to use third-party plugins. So now by upgrading to Angular V10, we can grab this new feature of a Date Range selection. Default Core Components Of Date Range Selection: The default core component of date range selection of Date Picker in Angular Material is: mat-date-range-picker mat-date-range-input mat-date-range-picker is an Angular Material Component for date range selection. mat-date-range-picker component is shown popup calendar like mat-datepicker component but allows multi-date selection option. mat-date-range-input is an Angular Material Component for the date range selection. This component requires to input fields to capture the start date and end date that are selected from mat-date-rang-picker. Create Sample Angular(V10) Application: Let's create a sample application to implement th

In this article, I try to give a basic understanding of implementing the Angular Reactive Forms Sample. In Angular Forms can be implemented by using either Template Driven Forms Or Reactive Forms. Reactive Forms are more useful for complex forms. Create A Sample Angular Project: For better understanding let's understand the concept by making hands dirty by writing sample examples. So let's create a sample angular project. If you have prior knowledge of creating Angular Application and configuring Angular Material(UI library) in to project, then free feel to skip this section. Let's use Angular CLI commands to create a sample project. Command to install Angular CLI:- Command To Install Angular CLI globally.This command is like one time installation. If you already have Agnular CLI installed on you system then skip this command. npm install -g @angular/cli Command to create Angular application:- ng new your-application-new Application template looks as below Now to run