LIDOR SYSTEMS

Advanced User Interface Controls and Components

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.

SlideBar component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

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:

//

// main.ts file

//

 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

 

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

 

 

 

//

// app.module.ts file

//

 

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { IntegralUIModule } from 'integralui/integralui.module';

 

@NgModule({

imports: [ BrowserModule, IntegralUIModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

 

 

 

//

// app.component.ts file

//

 

import { Component } from '@angular/core';

 

@Component({

selector: 'iui-app',

templateUrl: 'app.template.html',

styleUrls: ['slidebar-overview.css']

})

export class AppComponent {

// An Array object that holds all item objects shown in SlideBar

// It is set as a list of any custom objects, you can use any custom fields and bind them with SlideBar using its properties

private slides: Array<any>;

 

// Initialize slides in component constructor

constructor(){

this.slides = [

{ text: "Slide 1" },

{ text: "Slide 2" },

{ text: "Slide 3" }

];

}

 

 

}

//

// app.template.html file

//

 

<iui-slidebar>

<iui-slide *ngFor="let slide of slides">

<div class="slide-block">

<span>{{slide.text}}</span>

</div>

</iui-slide>

</iui-slidebar>

/*

slidebar-overview.css file

*/

 

.slide-block

{

width: 300px;

height: 250px;

}

.slide-block span

{

display: block;

padding-top: 115px;

text-align: center;

}

Supported Properties

In order to change the behavior of the SlideBar component, you can use the following properties:

  • allowAnimation - determines whether animation is enabled or not
  • animationPause - specifies a time delay in milliseconds between slide changes during animation
  • animationSpeed - specifies the speed of animation
  • controlStyle - specifies an object that holds the names of custom CSS classes
  • selectedIndex - specifies the index of currently selected slide
  • selectedSlide - an object that points to the currently selected slide
  • slides - holds a reference to the slide collection defined in your application component

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.

private selIndex: number = -1;

 

onSlideChanged(e){

this.selIndex = e.index;

}

<iui-slidebar [selectedIndex]="selIndex" (slideChanged)="onSlideChanged($event)">

<iui-slide *ngFor="let slide of slides">

<div class="slide-block">

<span>{{slide.text}}</span>

</div>

</iui-slide>

</iui-slidebar>

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:

//

// app.component.ts file

//

 

import { Component, ViewChild } from '@angular/core';

 

@Component({

selector: 'iui-app',

templateUrl: 'app.template.html',

styleUrls: ['slidebar-overview.css']

})

export class AppComponent {

// Get a reference of SlideBar component

@ViewChild('slidebar') slideBar: IntegralUISlideBar;

 

// An Array object that holds all slide objects shown in SlideBar

// It is set as a list of any custom objects, you can use any custom fields and bind them with SlideBar using its properties

private slides: Array;

 

private slides: Array;

 

// Initialize slides in component constructor

constructor(){

this.slides = [

{ text: "Slide 1" },

{ text: "Slide 2" },

{ text: "Slide 3" }

];

}

 

// Adds a new slide at second position

addSlide(){

this.slideBar.insertSlideAt({ text: "Slide " + (this.slides.length+1).toString() }, 1);

}

 

// Fired whenever a new slide is added to the SlideBar

slideAddedEvent(e){

if (e.slide)

console.log("slideAdded: " + e.slide.text);

}

}

//

// app.template.html file

//

 

<iui-slidebar (slideAdded)="onSlideAdded($event)" #slidebar>

<iui-slide *ngFor="let slide of slides">

<div class="slide-block">

<span>{{slide.text}}</span>

</div>

</iui-slide>

</iui-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.

The SlideBar component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.