In our previous post, we discussed How to Implement Swiper Carousel in Angular in 3 easy steps, Today we will discuss another but very powerful jQuery dependent Carousel Slick, which can be easily Implemented in and Angular 6+ version application.
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 other formats we used to use Filters in AngularJS version 1, But after Angular 2 we have pipes which serve similar tasks and once defined can be used anywhere in the application.
AIn this post, we will discuss a more advanced Image Carousel know as Swiper. This Carousel is actually more than an Image Slider, we can have any type of content from HTML, graphics, video etc. Swiper also supports parallax effect multiple slide effects, having verticle and horizontal sliders. Swiper also supports nested and easy installation of multiple Sliders/ Carousels on a single view.
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, you will be able to build an application which will have components from Angular Material which you can find here.
Continuing from my previous post has an example of filter pipe usage in Angular 5 application. Here we will upgrade that simple filter app to level next. I have upgraded this application to Angular v6, 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 following tasks:
1) Create a new Angular Application.
2) item.ts having item model definition.
3) mock-data.ts, will have a list of items.
4) use ngModel to have data binding flowing both sides.
5) Change event binding to get Checked item record.
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 data between components using @Input() Decorator. @Input() decorator will allow passing data in the defined template.
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 of the list.
– Select/ Unselect All control on top of the list.
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.