In this tutorial, we will discuss how to add a form using Angular Material Form controls with validation. The form will have a text field, select dropdown and radio control to select an option from.
Continue reading Angular 8 | Template Driven Form Validation Tutorial by Example
As we all know Firebase provides an awesome package of cloud services making the life of developers very easy. There is a wide range of tools available for next-level app development like Authentication, Testing, Analytics, Storage, Database, etc.
In this post, we will create an Ionic Application with Image Upload feature with Progress bar. It will also list already saved of Images. This application will focus on the two most important services of Firebase
Continue reading Ionic 4 + Firestore + Storage | Image Upload with Progress Tutorial by Application
In this tutorial, we will implement a very simple Autocomplete feature which is also known as TypeAhead or Suggestion search bar. Typeahead is basically an Input field where user can type and get matching results in a dropdown list to select from.
Adding a suggestion or Autocomplete field is useful where we have a large data to show up which can’t we be accommodated in tradition select dropdowns. Autocomplete lists really optimize DOM structure by preventing a dump of large data on the client-side. Continue reading Angular | Simple TypeAhead Autocomplete Suggestion Search implementation in Angular 6+ Applications
Android is already packed with great Calender and Timepicker to add-in application. Which most of the time fulfill basic requirements needs of a project. But some times few challenges come on ways which call for more flexibilities in Calander date pickers.
A few days back I was working on a project with Booking appointment module. There was a requirement to disable all Sundays and Saturdays in calendar datepicker dialog so that nobody will be able to select disabled dates. But there is no possibility to achieve that in traditional datepicker Calender.
Continue reading Android Material Datepicker and Timepicker by Wdullaer Tutorial by Example
Angular help us create a robust and real-world application which may have complex architecture. To reduce code and make maintenance efficient, breaking application into multiple and independent working components is very important and basic practice.
Sometimes these modular components are placed in the application at different hierarchies such that any type of relation.
In this short tutorial, we will discuss a very common question on How to keep Angular’s local and global packages updated?
When we create a new Angular project, it lists all its packages used in a separate file called package.json, giving details in JSON format about packages and their current version installed.
Continue reading How to update local Angular CLI version? in package.json file using ‘ncu’ utility
In our previous tutorial, we discussed how to implement a very basic Routing Module in an Angular 8 application. Here we will go a step further to discuss some more concepts related to Routing in Angular 8 application.
Create an Angular 8 application which will have Nested Routing up to three levels. Each level of components has its own Router Module. We will also discuss How to use lazy loading concept in Angular 8 Routing to load components on run time when they are called.
Many modern Javascript based front-end application create Single Page Application(SPA) which loads everything once on the browser after that user can navigate between pages/ views very quickly without loading any HTML or JS content except data.
Continue reading Angular 8 | What is Routing and How to add in Angular application quickly
In this article, we will discuss how to add Datepicker using Angular Material in the project. Also, discuss some tricks to solve some basic challenges like
How to open Datepicker on Input focus?
How to Set Min and Max date in Datepicker?
Change Material Datepicker view to Year or Month by default.
Disable some of the dates or days in Datepicker calender.
Let’s start with a new Angular 8 project. Then we will install Angular Material 8 and do some configuration. If you already have a project up and running then directly jump to interesting part 🙂
Continue reading Angular Material 8 | Datepicker Tutorial with Examples
Checking/ Unchecking a list of items with checkboxes is provided with a master checkbox to provide ease to users to control all list items. Angular Material Checkbox module MatCheckbox proves very handy in creating such lists with a number of properties.
In Material Checkbox module there are three states with Checked and Unchecked which are common, but there is also a third state called Indeterminate which is a middle of these two. Indeterminate Checkbox state indicates that some of the list items are checked but not all. It is indicated with a hyphen (-) in the checkbox.
Here we will create a list of items with a master checkbox using which a user can check to uncheck all item lists. Also if a user checks some of the items but not all, the master checkbox will show Indeterminate state which is very easy to implement.
