GuidesAPI ReferenceLatest UpdatesBlogVideosStart Building Apps
API Reference

Ionic 4 ngx-datatable Tutorial Advanced

Introduction

This is part 2 (advanced part) of the ngx-datatable Ionic 4 application tutorial.
Please refer to the basic tutorial and complete it first, then move to this tutorial.

🚧

Pre-condition

There is an important pre-condition to make your app work: you will need to create an API Express Service (step 1 of this tutorial).

Please, download the API Express project backup file to import it to your app in the next step.

Downloads and Resources

You can also download the advanced Ionic 4 DataTable app backup file for importing to your app. In this case, the API Express service will be created automatically.

Step 1: Creating API Express Service

  1. To start, create a new Ionic 4 app (blank).
  2. After that, click Create new > API Express Service. Select the downloaded API Express service and confirm importing it to your project:
1137

Creating API Express service

Step 2: Creating Page UI and Defining its Logic

  1. Go to the Screen1 DESIGN tab.
  2. Now, under the PROPERTIES tab, set the Page Header and Page Footer properties to False.

Defining DataTable Component

  1. Drag & drop the DataTable component to the screen.
  2. Now, switch to the DATA tab and, for datasource, select Service , and add the API Express service we have just created. Rename the service to coctailsService.
  3. Now, click Success Mapping and, in the mapping editor, click Expand all for both Service response and Page. We should map the added service to the DataTable component.
  4. Also, for Server Infinite (or Server Pages) DataTable Mode parameter (check Step 7 below), the TypeScript return value.length; should be added to the service count. To do it, in the mapping editor for success mapping (under the DATA tab), click the green TS button next to DataTable1 count to open the editor, paste the TypeSript and save.
    Here is how the resulting mapping should look like in the editor:
1593

Service Success mapping

6 Go back to the DESIGN tab and select DataTable.

📘

You can use the OUTLINE menu for navigating between App UI components

  1. Under the PROPERTIES tab, expand the Data Mode property and select Server Infinite for Mode. For Service Name, select our service, coctailsService. Set the Row Height and Table Height properties to 50(%). Then define SelectionType as Single and for the (select) attribute, enter selectItem($event).
  2. Now, we should define both DataTable columns. To do it, select them one by one and set the next properties:
  • For DataTableCol1: Name to Drink and Property to strDrink;
  • For DataTableCol2: Name to Image and Property to strDrinkThumb.
  1. Since we have the image link in the second column, we should convert this link.
    So, at first, we should add the service of Angular, {DomSanitizer} (https://angular.io/api/platform-browser/DomSanitizer). To do it, open the CODE tab, and add to Custom includes this service with the next path: @angular/platform-browser:
1037

Defining Custom includes

  1. Then add a new variable, domSanitizationService of {DomSanitizer} type and enable the Add DI checkbox:
1597

Adding domSanitizationService variable

  1. Open the DESIGN tab and for DataTableCol2, click the Edit button for Cell Template and insert the below HTML: 
<ion-thumbnail>
  <img [src]="domSanitizationService.bypassSecurityTrustUrl(value)">
</ion-thumbnail>

Here is how it should look in the HTML editor:

1581

Editing DataTableCol1

Now, when we have configured the dataTable component, we need to initiate it:
12. Expand the EVENTS panel from the bottom and select the Page component. Then select Before page showing for Event and DataTable update for Action with DataTable1 as the Component name. Do not forget to save the event:

1599

Setting up Page event

  1. Now, switch to the CODE tab and add two more variables of String type: name and image
  2. Then add a new function, named selectItem with the next code and define event for Arguments:
console.log(event.selected);
this.name = event.selected[0].strDrink;
this.image = event.selected[0].strDrinkThumb;

The CODE tab should look like this:

1598

CODE tab

Defining Card Component

  1. Go back to the DESIGN tab and drag & drop the Card component to the screen.
  2. Then add an Image component to the Card and insert the {{name}} variable as the Title Text:
  3. Now, select Image and under the PROPERTIES tab, enter Waiting... for Alt.Text.
  4. After that, add a src attribute with the {{image}} variable.

Defining Grid Component

  1. To finish with the UI, add a Grid component to the screen and drag per one Button to both Grid Cells.
  2. Define Button1 first:
    • Color: Success;
    • Expand: Full;
    • Text: Update.
  3. Expand the EVENTS tab and add the DataTable update event for Button1 Click event, save. This event will allow quick updating of the table whenever new items are added to it:
1598

Defining Button1

  1. Similarly, define Button2:
    • Color: Dark;
    • Expand: Full;
    • Text: Clear.
  2. Under the EVENTS tab, add the DataTable clear action for Click event. Don't forget to save.

Finishing Touches

You might also like to beautify your app UI. To do it, add the below code to the SCSS tab of Screen1:

ion-content {
    --background: url("https://images.pexels.com/photos/743986/pexels-photo-743986.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") 50% 50%;
}

Step 3: Testing App

Congratulations, you have successfully completed this tutorial and can now click TEST to enjoy your app working:

1390

App testing