Skip to main content

Posts

Angular(Version 10) Date Picker Range Selection In Angular Material UI

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-pickermat-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 the date rang…

A Basic Understanding On Angular Reactive Forms

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 the applicat…

.Net Core HttpClient JSON Extension Methods Using System.Net.Http.Json Package

.Net Core 3.0 onwards Microsoft brought up a new package called System.Net.Http.Json. This new package provides JSON extension methods for HttpClient. These JSON extension methods will have a prebuild mechanism for serializing or deserializing response data or payload of HttpClient call.
System.Net.Http.Json extension methods that are provided to HttpClient, few of them are mentioned below. GetFromJsonAsyncPostAsJsonAsyncPutAsJsonAsyncReadFromJsonAsync In this article, we understand System.Net.Http.Json package by implementing the HttpClient samples by with and without JSON extension methods and compare them.Create A .Net Core Web API Sample Application:Let's create a .Net Core sample Web API application, from this application we will consume another Web API by implementing HttpClient calls. We can create a Web API sample application using IDE like Visual Studio 2019(Supports .Net Core 3.0 plus) or Visual Studio Code. Create A Typed Client:In .Net Core using the HttpClientFactory ap…

A Brief Tour On .NET Core View Components

View Components are small pieces or chunks of a reusable block of code.  A View Component is made of the class(Component Class) and a view that looks like Controller. But View Component can't be triggered or initialized by a user request like MVC Controller, it will be invoked from code manually.A View or Razor can be completely or partially build using View Components. Create A .Net Core MVC Sample:Let's understand View Components by doing simple examples on it. So let's create a sample .Net Core MVC application(another choice to use like Razor Pages sample application). Use either Visual Studio 2019(IDE supports .Net Core 3.0 plus version) or Visual Studio Code. Implement The View Component Class:View Component Class is the logic container where we can prepare data that need to be bind to view on the render. Create a folder like ViewComponents where will create all our application components.
A POCO class that inherits Microsoft.AspNetCore.Mvc.ViewComponent can be called a …

Split HTML And C# Code In Blazor Using Either Partial Class Or ComponentBase Class

By default Blazor component file consists of HTML code and C# code under the single file. For better coding standards we can split HTML code and C# code to separate files using concepts like: Partial ClassComponentBase Class Create Sample Blazor Server Application:Blazor Single Page Application comes with two types of templates like (1) Blazor Server,  (2) Blazor Web Assembly. Let's create a Blazor Server templated sample application to understand to split the *.razor(Blazor file extension) files. 
Using Visual Studio 2019 using a rich user interface we can create Blazor Templated application very easily. But for this sample, I'm using .Net Core CLI(Command Line Interface) with Visual Studio Code IDE.Click to know how to use Visual Studio Code Editor for .Net Core applications. .Net Core Blazor Server CLI Command:-dotnet new BlazorServer -n Your_Application_Name Blazor project preview:- Open a command prompt whose path needs to be pointed to the Startup.cs file in our project(which …

Dynamic Data Binding Of Email Body Template Using .NET Core Razor Library

In general, there are two most common approaches to build an email template like:System.Text.StringBuilder using this we generate template by appending n-number of strings. This approach is hard to maintain, can not do code debug, etc.Another approach is like storing the entire email template in the database, where the template contains a placeholder to be replaced with dynamic data. Compare to the StringBuilder approach, the preferring database will make code Maintainance easy. But in this approach also debug code is hard. What Kind Of Solution Razor Library Provides?:Razor Library is a .Net Standard Library that has an inbuild razor engine where we can create Razor Page, MVC Views. It works as similar to MVC Views or Razor Pages where generate pages with Model binding.
So by using the Razor Library, we need to create a custom provider Razor Engine where we can fetch the Html of the page render using Model binding. So in this approach, we create Mvc View or Razor Page (.cshtml), to th…