Tech Seeker

ngrok: ngrok is an application that helps the developers to share their locally hosted applications (like .Net, Angular, Vue, Reactive, etc) over the internet. ngrok uses the tunneling concept of reverse proxy server that establishes a connection to locally running applications over the internet. Here to demonstrate the sharing of a locally hosted application we are going to create a sample .Net Core application that runs on localhost and will be shared its URL using ngrok app. Note: ngrok application exposes any local hosted application URL. So we can expose any applications like .Net Core, Angular, Vue, NodeJs, etc. .Net Core Web API Sample Application: Note: You can skip this section if you are exposing local url that is other than .Net Core application. Here I'm going to create a .Net Core Web API application, which runs locally using some local port. Then I'm going to expose the local URL over the internet to anyone using ngrok application. Let's create a sample a

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

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