AngularT Dark_870x220

Sponsored by the Kendo UI for Angular team

KUI_Angular_670x150

Want to learn more about creating great Angular web apps? It all starts out with Kendo UI for Angular - a complete UI component library that allows you to quickly build high-quality, responsive apps. It includes everything you need, from grids and charts to dropdowns and gauges.

We on the Kendo UI for Angular team are committed to bringing you the latest tips and tricks in the world of Angular development. We hope you enjoy the post!


Learn how to use Kendo UI to enhance your Angular apps by easily using the ScrollView widget to display an image gallery with built-in navigation.

In this post, you will learn more about how to use Kendo UI to enhance your Angular application. Kendo UI is a collection of JavaScript UI components with libraries for React, Vue, Angular and JQuery.

This post will focus on using the ScrollView widget to display a horizontal collection of image views with built-in navigations between them. We will use a couple of images, considered as e-commerce items to build an image gallery. Among other things, you will learn about how seamless it is to quickly get started with Kendo UI components for an Angular application.

Install the Angular CLI

If you have never used or don’t have an Angular CLI installed on your machine, run the following command from your terminal to install it, as it will be needed to seamlessly craft a new Angular application:

npm install -g @angular/cli

The preceding command will install the Angular CLI globally on your machine. You can now use the ng command to easily create a new Angular application, generate several components for your project needs and run the application using the inbuilt development server.

Setting up an Angular Application with the CLI

Here, you will set up the new Angular application for this tutorial. Run the following command to create an application named kendo-gallery-app within your development folder:

ng new kendo-gallery-app

Once the installation process is complete, change directory into the newly created project as shown here and start the application using the ng serve command:

cd kendo-gallery-app
    
// start the application
ng serve

You may experience an error with the message below in the console:

ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.
node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.

This happens because the latest rxjs version is no longer compatible with your TypeScript version. The quick way to fix this, is to delete the node_modules folder. Now, open the package.json file and within the dependencies object, edit the rxjs by removing ^ :

  "dependencies": {
    ...
    "rxjs": "6.0.0", // remove the ^
    "zone.js": "^0.8.26"
  },

Save the file and run npm install command again. Once the installation process is complete, you can now proceed to start the application with ng serve.

This will compile your application and start the development server. To view the default page of this Angular application, navigate to http://localhost:4200 from your favorite browser and you will see this:

s_DF2E6001AE266CB23B5234C20D691AF9A4FFB627861A5BB8A8C152F65CCBF98F_1551162429225_angular-home

Your new application has just been compiled and served on the default port for Angular projects. Next, you will start exploring the goodness of Kendo UI to build a Gallery app as mentioned earlier.

In order to keep the structure of this application a little bit organized, you will generate a separate component for the gallery page and use the ScrollView widget within it. Stop the application with CTRL + C and run the following command to install the widget:

ng generate component image-gallery

This will generate a new folder named image-gallery which holds the new component’s CSS, HTML, and TypeScript files that you will use later in this application. In addition, the ImageGalleryComponent has also been imported and added to the declarations within the application root module app.module.ts as shown below:

..
import { ImageGalleryComponent } from './image-gallery/image-gallery.component';
@NgModule({
  declarations: [
    AppComponent,
    ImageGalleryComponent // this was also added
  ],
...
})
export class AppModule { }

This will allow the Angular application to be aware of the new component.

Add Kendo UI ScrollView Widget

With the application already set up and a separate component for the gallery created as well, you can now proceed to add the Kendo UI ScrollView widget to the application. You can quickly and easily do this by using Angular CLI to add the Kendo UI package in one step. From the terminal and still within your project directory, run the following command:

ng add @progress/kendo-angular-scrollview

The command above uses the ng add command from Angular CLI for adding any new package to an Angular project, to download and install kendo-angular-scrollview. Once the installation process is complete you will realize that ScrollViewModule and BrowserAnimationsModule has been imported and added to the imports section within the app.module.ts file:

// ./src/app/app.module.ts
...
import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [
    BrowserModule,
    ScrollViewModule, // this was added
    BrowserAnimationsModule // this was added
  ],
  ...
})
export class AppModule { }

With this in place, you can now proceed to use the ScrollView widget.

To use the Kendo UI ScrollView component, navigate to the TypeScript file for the gallery component in ./src/app/image-gallery/image-gallery.component.ts file and replace its content with this:

    // ./src/app/image-gallery/image-gallery.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-image-gallery',
  templateUrl: './image-gallery.component.html',
  styleUrls: ['./image-gallery.component.css']
})
export class ImageGalleryComponent {
  constructor() { }
  public items: any[] = [
    { title: 'E-Commerce item 1', url: 'https://bit.ly/2VlsHZ8' },
    { title: 'E-Commerce item 2', url: 'https://bit.ly/2TmQeeW' },
    { title: 'E-Commerce item 3', url: 'https://bit.ly/2NrURzf' },
    { title: 'E-Commerce item 4', url: 'https://bit.ly/2EcKcnD' },
    { title: 'E-Commerce item 5', url: 'https://bit.ly/2U9KYse' },
    { title: 'E-Commerce item 6', url: 'https://bit.ly/2EcLlLX' },
    { title: 'E-Commerce item 7', url: 'https://bit.ly/2Vr5jd9' }
  ];
  public width = '100%';
  public height = '600px';
}

Here, in addition to a particular width and height for the gallery app, you have also defined an items[] array that contains a couple of objects with title and an image URL. You will loop through these items and display the images within the view.

Next, navigate to ./src/app/image-gallery/image-gallery.component.html and replace its content with:

// ./src/app/image-gallery/image-gallery.component.html

<div>
  <kendo-scrollview [data]="items" [width]="width" [height]="height" [arrows]="true" [pageable]="true">
    <ng-template let-item="item">
      <h2 class="demo-title">{{item.title}}</h2>
      <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
    </ng-template>
  </kendo-scrollview>
</div>

Here, you used the kendo-scrollview HTML tag, which takes in data attributes such as:

  • width: To specify the width of the gallery.
  • height: To specify the height of the gallery.
  • arrows: Used to enable or disable the built-in navigation arrows. This is always set to false by default.
  • pageable: Used to enable or disable the built-in paging functionality. This is also set to false by default.

Then, finally you looped through the items and passed each item URL to src attribute in HTML img tag.

Finally, to display the gallery component, replace the content of ./src/app/app.component.html with:

    // ./src/app/app.component.html
<app-image-gallery></app-image-gallery>

The selector used here referenced the ImageGalleryComponent.

Test the Application

With every required component in place, you can serve up your application from the terminal with:

ng serve

This will show you what you have built so far on http://localhost:4200. Navigate to that page and view the application.

s_DF2E6001AE266CB23B5234C20D691AF9A4FFB627861A5BB8A8C152F65CCBF98F_1551165441183_ezgif.com-video-to-gif+29

Conclusion

In this post you have learned how to build a very simple image gallery using Kendo UI ScrollView widget in an Angular application. This comes in handy whenever you need a quick and easy way to implement gallery for any Angular app.

This is one of many expertly engineered UI components by Kendo UI to enhance a new Angular project or an existing one. Check the official documentation for other UI components.

I do hope you find this tutorial helpful. The source code can be found here on GitHub.


Christian Nwamba
About the Author

Christian Nwamba

Christian is a Lagos, Nigeria based software developer and developer advocate. He’s keeps pushing boundaries with/for the Next Billion Users and Next Million Developers through Microsoft

Related Posts

Comments

Comments are disabled in preview mode.