Tech Seeker

In this article, we are going to understand the steps for installing and creating the Ionic5 sample application using Vue and also run our sample on the android mobile device emulator. Create A Sample App Of Ionic5 Using Vue : To begin to create an Ionic application, we should have the Ionic CLI installed in our system environment. Command to install latest Ionic CLI: npm install -g @ionic/cli@latest Now run the following command to create Ionic5 using the Vue application. Command to create Ionic Vue application ionic start your_app_name blank --type vue By default Ionic provides few templated projects here I'm creating the 'blank' project. TypeScript Or Javascript: By default Ionic sample created with the support of TypeScript in any library like angular, react, and vue. Typescript can be chosen to develop our application. But in the case of Vue most of the developers or preferred to choose javascript syntax instead of Typescript for application development. So to m

In this article, we are going to understand the authorization flow using user roles and claims in the blazor webassembly application. Create A Sample Blazor WebAssembly Application: Let's create a sample blazor webassembly application for our demo. We can use any IDE for the application development but the most recommended is Visual Studio 2019(version 16.8.*) and  Visual Studio Code . Authentication Setup: To implement authorization first user need to be authenticated. So here we will implement some fake user authentication with some roles and claims. For complete authentication, implementation checks my blogs like  Access Token  and  Refresh Token . Package Manager Install-Package Microsoft.AspNetCore.Components.Authorization -Version 5.0.1 .Net CLI dotnet add package Microsoft.AspNetCore.Components.Authorization --Version 5.0.1 A core component of blazor authentication is 'Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider', here we going to

In this article, we are going to fetch user public IP Addresses and Geolocation in the blazor webassembly application. Third-Party APIs: The API to get users IP Address endpoint: https://jsonip.com/ Free endpoint, for official docs, visit "https://getjsonip.com/#docs". The API to get users Geolocation based on users IP Address endpoint: http://api.ipstack.com/User_IP?access_key=your_api_key&format=1 This endpoint has pricing subscription plans including the free subscription plan, for official docs, visit: "https://ipstack.com/" Create A Sample Blazor WebAssembly: Let's begin our demo by creating a sample Blazor WebAssembly application. For development, any type of IDE can be used but more recommended are Visual Studio 2019(Version 16.8.* latest that builds .Net5) or  Visual Studio Code . Fetch User IP Address: Now let's create a model that represents the IP Address payload. Models/IPAddress.cs: using System.Text.Json.Serialization; namespace Blwa

InputRadioGroup built-in razor component was introduced from .Net5. This built-in component can be used either in the Blazor Server application or the Blazor WebAssembly application. Create A Blazor WebAssembly Sample Application: Let's create a sample Blazor WebAssembly application in which we are going to implement some samples to understand the InputRadioGroup component. For application development can begin with any type of IDE but the most recommended are Visual Studio 2019(Version 16.8.* only latest can build the .net5 application) or  Visual Studio Code . InputRadioGroup Implementation: Now let's implement a sample to understand the InputRadioGroup. Let's create a form model for binding values. Models/Vehicle.cs: namespace Radio_Group_Sample.Models { public class Vehicle { public string Name { get; set; } } } Here we created a simple model that will be used by the blazor form component 'EditForm'. The property 'Name' will be used by the I

In this article, we will implement the steps to fetch the user IP Address and Geolocation in an angular application. Third-Party APIs: The API to get users IP Address endpoint: https://jsonip.com/ Free endpoint, for official docs, visit "https://getjsonip.com/#docs". The API to get users Geolocation based on users IP Address endpoint: http://api.ipstack.com/User_IP?access_key=your_api_key&format=1 This endpoint has pricing subscription plans including the free subscription plan, for official docs, visit: "https://ipstack.com/" Create An Angular Sample Application: Let's implement an angular sample that will display users' IP Addresses and Geolocation by using third-party APIs. Command To Install Angular CLI:(If not installed on your system previously) npm install -g @angular/cli Angular CLI Command To Create Angular App: ng new your_project_name Command To Run App: ng serve Import HttpClientMoudle: Let's inject the 'HttpClientMoudle

In this article, we will understand the process to generate the HTML to PDF using 'ngx-print' library in Angular. An Overview On ngx-print Library: This library works based on directives. These directives make the printing HTML to PDF very easily with smooth transitions. The key terms of this library are: NgxPrintModule ngxPrint(Directive) printSectionId(Input Property) printTitle(Input Property) printStyle(Input Property) useExistingCss(Input Property) styleSheetFile(Input Property) Create A Sample Angular Application: Let's create a sample angular application where we are going to implement logic to use 'ngx-print' library. Command To Install Angular CLI:(If not installed on your system previously) npm install -g @angular/cli Angular CLI Command To Create Angular App: ng new your_project_name Command To Run App: ng serve Install Print Npm Package: Command To Install Print Package npm install ngx-print After installing the npm package reference will be

In this article, we are going to explore the device detection library 'ngx-device-detector' in the angular application. An Overview On ngx-device-detector Library: This library is useful to identify a browser, device type, request user agent, etc. This library is also compatible with the angular AOT compiler. Library provides us angular injectable service like 'DeviceDetectorService'. This service provides methods like: getDeviceInfo isMobile isTablet isDesktop Create A Sample Angular Application: Let's create a sample angular application to understand the 'ngx-device-detector' library. Command To Install Angular CLI:(If not installed on your system previously) npm install -g @angular/cli Angular CLI Command To Create Angular App: ng new your_project_name Command To Run App: ng serve Install Device Detection Npm Package: Command To Install Device Detection Package npm install ngx-device-detector --save After installing npm package reference will be au