ReactJs Sign-In forms Integration with Firebase services to enable a user to sign-in using Google Authentication. We are focusing on how to make them work with a perspective of a real-world large project. Firebase is a group of powerful services which are provided by Google. It is consists of many awesome features which can be
Angular ngFor, Of Directive – Lets get tricky!
Hey all! today we’ll learn about one of the most popular structural directive *ngFor which is used by an Angular developer a number of times. The ngFor directive is mainly used to display dynamic data using an Array or Object in a view or HTML template. This Array or Object could be fetched from a
ReactJs Sign In Form Example Tutorial | Part 1
In this article, we will learn how to create a simple but highly reusable Sign In form in ReactJs application. Our Sign In form will have custom components for Input and Button elements. The input fields in our Sign In form will be of a floating type having focus transitions to move label name animating
React Router Dom v5 | Adding routing in React app tutorial by example
React application needs to include a routing library to add routing capabilities. In this tutorial, we will learn How to add React Router Dom library in a React app to switch between multiple components. The react-router-dom is a popular and well-supported library available which is the most preferred routing library for React applications due to
Resolve! Google Authentication Codes Saying Invalid Code for Two Way Authentication
In one of my online account, I am using Google Authenticator based two-way authentication. But surprisingly when I logged in my account and put the Google Authenticator code it said: “Invalid Code Entered!” I was shocked to see how this could happen a few days back I logged in that. In a fraction of seconds,
Reactstrap | Add Bootstrap UI components in React using Reactstrap
In this React tutorial, we’ll discuss how to quickly start using Bootstrap UI components in a React JS 16 application by integrating the Reactstrap. We all know the power Bootstrap UI components provide to a developer in quickly creating a robust and fully responsive web application without any head-scratching efforts. The bootstrap framework takes full
Angular 8|9 Rich Text Editor using Ngx-Quill Example Tutorial
Rich text editors or What You See Is What You Get editors to provide a full-featured textarea where users can do text formating, add multi-media content, use emojis use text heading change text size or color, etc. In this tutorial, we will learn How to add a Rich Text editor in the Angular application by
Angular 8|9 Typescript | How to Download PDF/ EXCEL or other files instead of opening in new tab
In this tutorial, we will learn how to download any file type which can be a Doc, Excel, PDF or even images to file system instead of opening them in a new browser tab. A simple task like downloading a file on the click of a link also sometimes proves so much challenging. HTML 5
Angular 8|9 How to Upload Excel/ Image File using FormData with Post HTTP method
In this tutorial, we will learn How to Upload files like Excel, Image or any document like PDFs to a Web Server in Angular application using FormGroup class and FormData interface. We are going to create a simple form that will have a file input control to select a file which will be uploaded by
Resolve! java.lang.ClassNotFoundException: Didn’t find class “org.apache.http.ProtocolVersion” Volley Issue with targetSdkVersion 26 to 28
A few days back I was trying to upload the latest version on my Android application to Playstore when I faced this upload error:
Angular 9|8|7 Range & Drag Slider Bar using ng5-slider
Angular tutorial for implementation of Drag Button Slider using the ng5-slider NPM module package. Slider or Range Slider plays an important role to add a custom control in page for users to select values by simply dragging a button on the scale provided. This type of control can be used to select a value or
ElementRef in Angular 9|8|7 Using getElementById in Typescript
In this Angular 8/9 tutorial, we will understand how to use ElementRef getting element reference in the document or HTML template as we use document.getElementById() method in vanilla javascript. # ElemementRef in detail The ElemementRef is a class which can wrap around a specified DOM element to enhance its properties and methods available on
MIUI 11 | Disable Vibration during Game or Silent Mode for Haptic Feedback
In modern smart mobiles, the vibration effect is used more than Just informing users about phone calls and messages. Mobiles these days supporting Heptic Feedback adding more engaging experience during game playing. This makes gameplay more awesome.
Resolve! Uncaught SyntaxError: Unexpected token ‘,’ or ‘<' in Angular
To create a production build for a remote server I usually run following ng command: $ ng build –prod But at the client end, there was some stage error popping up in the console and the application was not loading. Surprisingly it was working fine on my end and on my mobile network as well.
Echarts for Angular Charts using ngx-echarts | Tutorial with Examples
Echarts In Angular project using the ngx-echarts we are going to discuss in this tutorial. The Echarts is javascript based library that provides a wide variety of highly customizable charting options for web applications. The ngx-echarts package module is exclusively customized for Angular projects which can be used to build echart library-based charts in a
Angular 9|8|7 How to get Multiple Checkbox value Object and IDs Array
In this tutorial, we will learn how to get multiple checkbox selection values in form of array and object on click of a button or change in checkbox selection. These methods are generic for Typescript and can be implemented in any Angular 2+ version. We will create a list of dynamic checkboxes with a master
Angular Material 9|8|7 mat-table multiple column filters using select boxes
Angular Material 9/8 DataTable columns with each having its own separate filter, we are going to learn with an example tutorial in this post. Angular Material Table provides a great default filter component to filter data shown to the user, but this takes into account all columns and their cells. In this tutorial, we will
Scroll Progress Bar in Angular Applications
In this tutorial, we will create a scroll progress bar to indicate a user about how much of the total page is scrolled and how much is left to scroll. This scroll bar is generally shown on top of the page so that a user gets to know about the length of the page currently
Angular 9|8|7 Convert Tables into PDF File using jspdf-autotable Example
Angular tutorial to convert Tabular data into download document of PDF type. We can convert dynamic data into a table using a jsPDF Autotable library which can be converted into a PDF file to download or open in a new browser tab. In this article, we will learn How to install and use the jspdf-autotable
Angular 9|8|7 Material Table Column Width, Text Alignment Customization
Angular Material provides an awesome fully-featured data-table component that can be easily implemented in an Angular application. The datatable UI component provided by Material is based on the material design provides many features like Pagination, Sortable columns, Filter data, Frozen Columns, and Rows, etc. Although Material data-tables provides high-end functionalities, small things can eat-up most
