Ionic Integration

Using with Ionic Framework

This document provides a complete guide on how to build and use the Smart Angular Components with the Ionic Framework.


  • Node.js
  • IDE (e.g. Visual Studio )

Setup development environment

  1. Open the Command prompt/Terminal and run the following command line to install the ionic framework:

    on Windows:

    npm i ionic cordova

    on Linux:

    sudo npm i ionic cordova
  2. Run the following command in order to create a new blank application inside a new folder called smart-ionic:
    ionic start smart-ionic blank

    When prompted to select a framework pick Angular and press Enter to continue.

    When finished, a new blank Ionic Project will be created in the smart-ionic folder.

Configure a Smart UI Component in the new application

  1. Install the smart-webcomponents-angular npm package in the application folder. From inside the new folder - smart-ionic, type in the following command:
    npm i smart-webcomponents-angular
  2. Add the smart-calendar component to the template of the application. Open the html file containing the template for the application located in smart-ionic/src/app/home/ and add the smart-calendar tag:
          Ionic Blank
      <div class="ion-padding">
        The world is your oyster.
          <smart-calendar [weekNumbers]="weekNumbers"></smart-calendar>

    We will also enable the week numbering of the Calendar component by adding the weekNumbers property bidning.

  3. Set the weekNumbers property of the Calendar component in the located in smart-ionic/src/app/home/
    import { Component  } from '@angular/core';
      selector: 'app-home',
      templateUrl: '',
      styleUrls: ['']
    export class HomePage {
      constructor() {
      //Enable Calendar's week numbering
      weekNumbers: boolean = true;
  4. Configure the home.module.ts file to include the UI Component in order for Angular to recognize it. The file is located in the same folder as the template - smart-ionic/src/app/home/home.module.ts
    import { NgModule } from '@angular/core';
    //Import the Calendar
    import { CalendarModule } from 'smart-webcomponents-angular/calendar';
      imports: [
            path: '',
            component: HomePage
      declarations: [HomePage]
  5. Configure Angular to import the Smart Web Components CSS from angular.json file located in the root directory of the application - smart-ionic:
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "projects": {
        "app": {
        "architect": {
            "build": {
                "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "styles": [
                              "input": "node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
  6. Run the application by opening a command promp from inside the root directory of the project by entering the following command:
    ionic serve

    The ionic server will run the application on localhost and a new tab will open in your browser to view the result: