In this Angular tutorial, we’ll check 4 ways using which Angular 10/9/8/7/6/5/4 components in application with a relation like a parent or a child, non-relation components, and one to many components can communicate or pass data between them. Components are the building blocks of an Angular application. Using components we break-down a complex application into
Angular Material 10|9 Mat-Select Tutorial with Local and Dynamic HTTP Response
In this Angular Material tutorial, we’ll discuss how to implement Select box in Angular 10/9/8/7/6 application by using the MatSelectModule. Also, we’ll check how to add validation and customize the options using configuration properties. The Select component is used to enable a user to select single or multiple options available in the options drop-down. In
Angular Material 10|9 Datepicker Range Selection From To Dates with Validation
In this Angular Material tutorial, we’re going to discuss how to implement Material Datepicker with Range selection for From-To dates with required validation in Angular 10/9/8/7/6/5/4 application. Angular Material Datepicker component can be easily implemented by importing the MatDatepickerModule and MatNativeDateModule or MatMomentDateModule APIs as discussed previous post with custom Date parse formats. In the
Angular Material Datepicker Change Date Format (12 December 2015 ) of Selected Date
In this Angular Material tutorial, we’ll learn how to implement Material Datepicker in the application and change the selected date format in the Input field control after selection using moment library by using minimal configuration and quick ways. Angular Material provides a number of components that can be easily used in the project, one of
Angular | Ng-Class Conditional Expressions , If Else for Multiple and Single Class Names on Elements
In this quick Angular tutorial, we’ll learn how to use the NgClass directive to implement conditional expression to add single or multiple classes on a DOM element selector in Angular 10/9/8/7/6/5/4 application. The ng-class directive in Angular is used to dynamically add or remove classes on the element based on conditional expression applied. This directive
Angular & JavaScript | Open Blob URL View PDF and Images in New Tab
In this JavaScript quick tutorial, we’ll learn how to select a file using a File input control to convert it into a Base64 URL, also add a View button to preview the selected file by opening in the new Chrome tab by creating a BLOB url. In the HTML forms, where we have upload document
Google Maps in React with Places Search Bar, Draggable Marker using google-map-react
In this React tutorial, we’re going to embed a Google Map with advanced feature components like Draggable Marker, Fetch Address of current point using Geocoder and Place search, or Autocomplete in React application by using a widely used and popular third-party package name google-map-react. Google Maps javascript API provides a number of methods and features
How to get a Google API Key for using Maps?
In this quick step by step tutorial, we’ll get to know how to get a Google API key for free by following a few steps. Getting Google API Key # Step 1: Go to the Google Console portal. You need to signup/ signing with your Google credentials. # Step 2: Select the project or create
Angular Material 10|9 File Browse/Upload UI-Design in Form for Input with File Type using Material Components
In this Angular Material tutorial, we’re going to learn How to add a File Browse button with an Input text field to show names of files selected by using the Material library components. When using the Material UI components in the Angular project to create a Form, we always miss control for uploading a file.
Angular 10|9 Best Video Player using ngx-videogular with Customized Controls
In this Angular tutorial, we’re going to learn how to embed a video player to play videos in Angular 10/9 application with support for the customized playlist and video paying controls using ngx-videogular package. HTML 5’s Video player provides a lot of options to create a custom player supported for many modern browsers. We can
How to Debug Stored Procedures in SQL Server using Visual Studio 2019
In this quick tutorial, we’ll discuss how to debug SQL queries written in Stored Procedures using SQL Data Tools in Visual Studio 2019. When developing complex Stored Procedures, sometimes a need for some Debugger tools feels out. Before the latest version of SQL Server Management Studio version 18, there was a Debug option available. Using
Download/ Install SQL Server 2019 Free/ Community Edition for Windows 10 Step by Step
In this tutorial, we’ll learn how to install SQL Server 2019 and MS SQL Server Management Studio for Windows 10 by easy steps. Sometimes when you try to login to Microsoft SQL Server Management Studio through windows authentication, it doesn’t work, because SQL Server also needs to be installed in the system to create and
React + Material UI | Accordion Tabs Tutorial with Example
In this React tutorial, we’ll learn how to implement the Accordion component in React application using the Material-UI library. The accordion component consists of a tabular structure where each tab contains a section data in a horizontal layout. A user can click on the heading to expand the section and view its content. Accordion component
Angular 10|9 Reactive Form Validation Messages for Email, Password, Name and Address
In this Angular tutorial, we’ll create a form using the Reactive Form approach and show validation messages if the user enters an invalid value. Form Controls will be used with Bootstrap styling to show error messages. Angular forms can be easily created by using the Template-driven or Reactive form approach. In this tutorial, we are
React + Material-UI Datepicker and Timepicker Tutorial
In this React tutorial, we’ll discuss how to add Datepickers and Timepicker in the ReactJS application by using the Material UI library. Material UI library is exclusively created for React application. Material provides a wide variety of ready to use component APIs like Tables, Dialog modals, Inputs, Buttons, Grids, etc. The components created by using
React + Firebase + Material UI | Create a TODO App with CRUD Operations using Firebase Database
In this React 16+ tutorial, we are going to integrate Firebase Database service and Material UI library to create a working TODO application having CRUD (Create Read Update and Delete) operations in React Js application. Users can Add, List, Update or Delete todos from a list by communicating with Firebase. Firebase is very popular for
React Bootstrap 4 Table Pagination using react-bootstrap-table-next Example Tutorial
In this React 16+ tutorial, we’ll learn how to implement Bootstrap Table with pagination, filter …….. in React js application by using the react-bootstrap-table2 package. Bootstrap tables catch a lot of eyeballs when we need a table grid in the application. In today’s tutorial, we’ll learn how to add a Bootstrap table in React application
Angular | Allow Only Numbers or Alphanumeric in Input Restrict Other Characters using Keypress Event
In this Angular tutorial, we’ll learn how to restrict a user from typing only Numbers or Alphanumeric characters in the Input form controls in Angular 10/9/8/7/6/5/4 application by binding Keypress event. Input Form controls can be used to mask and allow only specific values that can be entered by a user for example to get
[Resolved] grunt assertion `args[1]->isstring()’ failed.
Grunt is a powerful tool to create build files for production and development. A few days back I was handed over an old AngularJs project which was developed by some earlier teams. I was struggling to create build and learned some new technologies while resolving the process like Yoeman. Just writing it up to share
Angular 10|9 Skeleton Loader Gray Animation Effect Like Facebook on List, Images etc.
In this Angular tutorial, we’ll learn how to implement an animated gray effect to display loader elements to indicate progress in Angular 10/9/8/7/6/5/4 application. The skeleton loaders depict the placeholder of the same structure for data going to be loaded. This type of skeleton loader got popularity when first seen in Facebook applications. The skeleton
