Add A Slider To You Angular App

March 31, 2020

#angular #webdev #javascript #showdev

Photo by Persnickety Prints on Unsplash

I share one trick a day until the end of the COVID-19 quarantine in Switzerland, April 19th 2020. Nineteen days left until hopefully better days.


The other day I was upgrading the dependencies of one of my client’s application developed with Ionic.

To my surprise, the “fade” transition of the slider wasn’t working anymore. After a bit of digging, I discovered, for performance reason, that the animations had been made optional and had to be solved by copying a piece of code in my application.

Moreover I also had to develop some design changes in its introduction process, which I did but actually not so straight forward as I assumed, as the slides are actually stacked when not displayed.

In short, it worked like a charm but that made me think, did you know that you can actually use the core Web Component of DeckDeckGo, our open source editor for presentations, to add a slider to any web applications developed with or without any modern frontend frameworks?

Probably not 😉.

That’s why I’m going to display in this blog post, as for example, how you can do so in an application developed with Angular.

Add a slider to your application


Installation

For this realization, we are going to need our core. Moreover, because our solution is based on template, we are going to need at least one of them. As we are looking to implement a slider in which we are going to display information, the easiest template to use is our title template which centers the content.

npm i @deckdeckgo/core @deckdeckgo/slide-title --save

Furthermore, it may complains at build time that some type definitions are missing no worries, just add these to your development dependencies.

npm i @deckdeckgo/types --save-dev

Configuration

Once installed we need to import the components. These are developed with StencilJS which provides a handy documentation on the subject.

That being said, Angular won’t resolve the libraries if we only import these as the following.

import '@deckdeckgo/core'; import '@deckdeckgo/slide-title';

That’s why we are using the provided loaders option.

import { defineCustomElements as deckGoCore } from '@deckdeckgo/core/dist/loader'; import { defineCustomElements as deckGoSlide } from '@deckdeckgo/slide-title/dist/loader'; deckGoCore(window); deckGoSlide(window);

Furthermore, because Angular is not going to recognize our templates, we have to instruct it to support custom schemas. This can be set in any modules or globally in app.module.ts .

import { BrowserModule } from '@angular/platform-browser'; import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule { }

Usage

Our components are installed and configured, we can add the slider which is nothing else that a container <deckgo-deck/> , and its children, the slides, <deckgo-slide-title> .

<deckgo-deck> <deckgo-slide-title> <h1 slot="title">Add</h1> </deckgo-slide-title> <deckgo-slide-title> <h1 slot="title">a slider</h1> </deckgo-slide-title> <deckgo-slide-title> <h1 slot="title">to your app</h1> </deckgo-slide-title> </deckgo-deck>

And that’s it, the slider is in place 🎉.

Our slider is ready


Customization

You might want to apply some styling to your slide, here are some options.


Hide Pager

A pager is useful for a presentation but most probably not for a slider in an application. That’s why you might want to hide it using the CSS4 variables --pager-display .

<deckgo-deck style="--pager-display: none;"> </deckgo-deck>

Hidden pager


Transition

You might want to use another transition effect. Our core doesn’t handle yet a lot of different animation, Pull Requests are welcomed, but it does already offers a fade effect or none .

<deckgo-deck style="--pager-display: none;" transition="fade"> </deckgo-deck>

Fade transition


Navigation

If we would implement the slide as an introduction to your application, there is a good chance that we would be interested to add a next and a skip buttons. Our core also emits multiple events and exposes navigation methods, let’s try to use these.

For such purpose, we add these two buttons, we are identifying our deck with #deck and are listening to two deck transitions events respectively slideNextDidChange and slidePrevDidChange .

<deckgo-deck style="--pager-display: none;" transition="fade" #deck (slideNextDidChange)="updateLastSlide()" (slidePrevDidChange)="updateLastSlide()"> <deckgo-slide-title> <div slot="title"><h1>Add</h1></div> </deckgo-slide-title> <deckgo-slide-title> <div slot="title"><h1>a slider</h1></div> </deckgo-slide-title> <deckgo-slide-title> <div slot="title"><h1>to your app</h1></div> </deckgo-slide-title> </deckgo-deck> <div style="position: absolute; bottom: 0; right: 0;"> <button (click)="skip()" *ngIf="!lastSlide">Skip</button> <button (click)="next()">Next</button> </div>

Finally we implement the related methods while using a ViewChild reference on the deck which exposes the methods we need.

import {Component, ElementRef, ViewChild} from '@angular/core'; import {defineCustomElements as deckGoCore} from '@deckdeckgo/core/dist/loader'; import {defineCustomElements as deckGoSlide} from '@deckdeckgo/slide-title/dist/loader'; deckGoCore(window); deckGoSlide(window); @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { @ViewChild('deck') deck: ElementRef; lastSlide = false; async skip() { console.log('Go to next page'); } async next() { const end = await this.deck.nativeElement.isEnd(); if (end) { await this.skip(); return; } await this.deck.nativeElement.slideNext(); } async updateLastSlide() { const index = await this.deck.nativeElement.getActiveIndex(); const length = await this.deck.nativeElement.getLength(); this.lastSlide = index === length - 1; } }

And that’s it, it works out 😁.

Navigation with our core


Summary

It isn’t our goal to provide the most complete core slider with a zillion options as it would not serve our main focus but, that being said, as you may have noticed, I think it offers a valid alternative to implement quickly a slider in any modern web applications.

If you want to know more about it, check out our documentation or give a try to our editor for your next presentations!

Stay home, stay safe!

David

Blog

Read the article

How To Make Your PWA Offline On Demand

May 21st 2020

#showdev #webdev #javascript #pwa

Read the article

Showcase Your PWA In Your Website

May 8th 2020

#showdev #webdev #javascript #webcomponents

Read the article

Develop A Konami Code For Any Apps With Stencil

April 19th 2020

#javascript #webdev #beginners #tutorial

More articles

Address

Fluster GmbH c/o The Hub Zürich Association Sihlquai 131 8005 Zürich

On the web

I have developed this website. Its open source code is available on Github