Overview of IntegralUI SlideBar for Angular 2

Created: 21 October 2016

Updated: 24 March 2017

IntegralUI SlideBar is a native Angular 2 component that allows you to animate slides created using images or custom content. It is a more advanced version of SlideBar directive for AngularJS. In this article, we will give detailed information on what features are included in SlideBar component.

The demonstration above shows only the basic features available in SlideBar component. There are few slides each showing a title. Slide changes are automatic and animated from right to left. Whenever a slide is selected, an animation runs showing the slide content in current view of the SlideBar component. Using navigation buttons, you can quickly switch to specific slide.

How to Use IntegralUI SlideBar in Angular 2

In order to use the SlideBar component in your app, you need to do the following:

Place the SlideBar using the iui-slidebar tag name

Add slides using the iui-slide tag name

Add custom HTML elements as slide content

(Optional) Connect the SlideBar to your data source

SlideBar accepts IntegralUISlide components as their content. It then arranges present slides in single line, showing only one slide at a time. Depending on animationSpeed property value, slides are moved from right to left, followed by a pause.

You can add custom content to each slide using HTML elements or other Angular components. Whenever a slide is selected, its content appears in the current view of the SlideBar.

In order to add slides to the SlideBar, you can either set them manually in HTML or create an array object that will hold all slides. For example:

By setting above properties, you can alter the behavior of the SLideBar component. For example, you can:

set a slide from which the presentation will start using either selectedIndex or selectedSlide property

choose to have slide changes with a slower speed than normal

stop or cancel an animation when required

set a long a pause between each slide change, etc.

Supported Events

Most of actions in SlideBar are accompanied by events. For example, whenever a slide is selected or changed, the slideChanged event is fired, or when a new slide is added or existing one is removed, the add/remove events are fired, etc.

Here is a list of available events:

clear - occurs when all items are removed from the SlideBar

slideAdded - occurs when new slide is added to the SlideBar

slideAdding - occurs before slide is added

slideRemoved - occurs when slide is removed from the SlideBar

slideRemoving - occurs before slide is removed

slideChanged - occurs when currently selected slide has changed

By handling the slideChanged event, you can add custom functionality in your code that will execute when particular slide is present in current view. On the other hand, you can add other custom action that may be required in your application.

SlideBar Navigation Buttons

There are two types of navigation buttons in SlideBar component: slide and arrow buttons.

Slide buttons are placed below the current view, their number is equal with the number of slides. Whenever some of these buttons is clicked, a slide with corresponding index will appear in current view of the SlideBar. This is useful to quickly navigate to specific slide and continue with presentation from there.

By setting the showNavigationPanel property value to true or false, you can show or hide this set of buttons.

Arrow buttons are placed on left and right side of the current view. They will appear when mouse cursor hovers over current view. Mostly these buttons are used to quickly navigate to the next or previous slide from the list. This navigation is circular, meaning that when the end is reached, it will continue to the last or first slide, depending on whether left or right button is clicked.

How to Add/Remove Slides Dynamically

In most cases, you can use only HTML to set the SlideBar with all slides and their content. However, there may be a case when you need to add a new slide dynamically on demand or even change its content during run-time.

For this purpose, you can use the built-in methods that allow you to change dynamically the structure of the SlideBar:

In above code, we are adding a new slide using the addSlide method. To access this method, at first we need to get a reference to the SlideBar component. In Angular 2 this is simple, in HTML add the #slidebar variable (or you may choose any other name for the variable) to the . Next by using ViewChild class and setting this variable as argument, you can locate the SlideBar within your application component.

After you have a reference to the SlideBar component, you can get access to all public methods available:

addSlide - inserts a new slide at the end of SlideBar

clearSlides - removes all slides from the SlideBar

insertSlideAfter - inserts a new slide in a position after specified slide

insertSlideBefore - inserts a new slide in a position before specified slide

insertSlideAt - inserts a new slide at specified position

nextSlide - moves the next slide from the list in current view

prevSlide - moves the previous slide from the list in current view

removeSlide - removes the specified slide from the SlideBar

How to Customize the SlideBar Appearance

The SlideBar component comes with a style sheet that contains all CSS classes used by the slide strip. By changing the attributes of these classes in your code, you can modify the appearance of the SlideBar, partially or in whole.

Furthermore, you can add your own CSS classes and override the default ones within your application code. For this purpose, the controlStyle property is used, which is an object holding the names of CSS classes for each control part. By changing this object value, you can add the names of new classes and replace the default ones.

Conclusion

IntegralUI SlideBar component allows you to animate slides created using custom content. Each slide can contain custom HTML elements or other Angular components as its content. By using different properties you can choose how fast slides are changed and whether navigation buttons are present or not.

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.