In this tutorial, we will Implement resizable feature on elements and layout. By adding resizable feature a user can resize a container or element by dragging from corners. The resizable feature can be added in many areas in an application to resize the editable container, Images, Dashboard sections, etc.
Datatable is popular among developers developing in web projects using the mainly jQuery library. It is a full package of many basic features like Pagination, Sorting, Filter search bar, etc. In this post, we will implement this fully featured Datatables library in Angular project and discuss various options available from basic to advance level of
Angular Material is a Material Design based UI library which provides a number of easy to use UI components. Angular Material data tables are used to display data in tabular format on pages. In this tutorial, we will create a new Angular project using Angular CLI. Then we will install the Material library in an
In a web application, we generally show a process status by graphical indicators like progress bars and spinners. In this post, we will discuss How to Implement the most common progress indicator Progress bar and Spinners. Angular Material provides a wide range of web components which are very easy to implement and use in Angular
Angular Interceptor is a powerful feature which can be used in many ways for securing and handling many HTTP related phenomena. HTTP interceptors were available in AngularJS but were missing in Angular 2, so there was a missing gap to manipulate HTTP calls globally at one place.
Supported from Angular 2 to latest version 9 Google maps are used in many applications as a location with visible maps pays an important role to make information more user-friendly. Embedded Maps can display markers of location or enable visual selection of address or show geographical location reviews etc. In this post, we will add
These days you may have noticed many applications including web and mobile having Tour Introduction to explaining something new or changed features in the application. A user can get to know about various features in this way when element or area is especially focused on a message. Such interaction is known by many names like
The application becomes more user-friendly when the user gets information about what is happening on screen. Whether its mobile or a Web Application showing messages like Success, Error or Notification in Toasts format is very common. Toasts are floating elements on the screen which fades away after some time or by some user interactions like
We all know about Bootstrap is a free and open-source Web framework, widely used by developer whether they are using jQuery or AngularJS in development. Bootstrap takes away headache for making application responsive and making it compatible to cross browsers. Moreover, it provides very easy to use plug and play HTML and working web widgets
Angular routing plays an important role in a real-world application which is responsible for loading different components which may have sensitive data as well. Angular provides a full proof mechanism to develop an application which can add a protecting shield for accessing components.
In this article, we will implement Firebase Authentication service in Angular Application to enable Login/ Registration simply with Email/ Password as well as Google account.
Our applications may have a lot of data for presentation, But for creating a good user experience it is preferable to see in a more understandable format like March 12, 2010 is better to read then Mon Mar 12 2010 15:23:40 GMT-0700 (Pacific Daylight Time). For such small and repeated tasks of transforming values in
Switch case is very popular among many languages weather on client side or server side. A switch provides flexibility to validate a section according to expressions. In this post, we will discuss the implementation of Switch cases in Angular 7 latest version.
Angular’s team build Google’s Material design-based framework known as Angular Material. This framework is based on principles of Google material design, you can read more about it here. Today we will discuss, on how we can fuse the beauty of Angular Material and its powerful components with Ionic 3 framework. At the end of this tutorial,
Continuing from my previous post has an example of filter pipe usage in Angular application. Here we will upgrade that simple filter app to level next. I have upgraded this application to Angular v9, worked basically on two important methods using which we can pass data between Angular components.
Listing of items in data is a simple way to show items. If users have to select only a single Item out of it, we need to use radio input fields. here we will discuss the implementation of radio input list in Angular 6. We will develop a simple Angular application which will have the
Angular’s best feature is component. We can divide different modules into a number of components. Where each component having its own responsibility to perform. But, sometimes these components may need to communicate with each other and share data having each other’s dependencies. In this post, we will discuss a simple example app which will share
In this post we will discuss on How to Create a Checkbox List having parents and child structure, using single data object. What we will do here? – Create a list with parents and children each having a checkbox. – Parents having controls to expand/ collapse respective children. – Expand/ Collapse All control on top
Image Carousels provides a good front-end user experience to show graphics or images in a small space in an interactive way. But in Angular Application we hardly find great carousels/ image sliders to work with. In this tutorial, we will implement a Great Simple and Easy to Use Angular Image Carousel.
In an Angular application in some situations, we need to make changes in local variables which are getting used and defined as global. These variable or Model values does not reflect any change if we pass them as argument or parameter in a component method, then change in that parameter value does not reflect globally