We use cookies to make for you best possible experience on our web shop and create targeted advertising.

Documentation for Ionic / Angular UI Theme

FRIDAY, 18. MARCH 2022. BYDEV TEAM

About App

This theme/template is a carefully assembled collection of Ionic 6 components which will help you build modern and beautiful Android and iOS apps. Using these components you can develop numerous different applications and save hours of coding. In addition to beautiful design, we gave our the best to make this template as simple as possible to use.

If you have any questions you can always contact us and our support will get in touch with you as soon as possible.

Setup

  1. First download node.js

      -Windows users, you may look to this video on how to install Node.js
      -For Ubuntu users, you may look to this video on how to install Node.js
      -For Mac OS X users, you may look to this video on how to install Node.js

  2. Open the terminal and run next command “npm install -g ionic cordova”

  3. Create your project ionicTemplate with next command  “ionic start ionicTemplate sidemenu” 
  4. Choose Angular

introduction

Keep in mind that in our tutorials every component is added to a blank template so every time we add it to “page 1”. Of course, you will change the number of the page, depending on what page you want to add.

Also in some videos, you will notice that we reset app in the terminal. This is because sometimes browser needs to be refreshed to show the latest changes. Therefore, on some video, you will see “reset app” and on some, you will not. 🙂

How to run project

    Start for Windows

    1. Extract your downloaded file
    2. Open extracted folder
    3. Open terminal with current location
    4. In the terminal write “npm install”
    5. In the terminal write “ionic serve”

    Start for iOS

    1. Extract your downloaded file
    2. Open extracted folder
    3. Open terminal with current location
    4. In the terminal write “sudo npm install”
    5. In the terminal write “sudo ionic serve”

App Settings

In our project open src/services/app-settings.ts

    export const AppSettings = {
      'IS_FIREBASE_ENABLED': true,
      'SHOW_START_WIZARD': true,
      'SUBSCRIBE': true,
      'FIREBASE_CONFIG': {
          'apiKey': "AIzaSyDhDVNa36xnz2RbR84vvWl5_i93D45vm-o",
          'authDomain': "ionic4-blue-light.firebaseapp.com",
          'databaseURL': "https://ionic4-blue-light.firebaseio.com",
          'projectId': "ionic4-blue-light",
          'storageBucket': "ionic4-blue-light.appspot.com",
          'messagingSenderId': "606123713775",
          'appId': "1:606123713775:web:284f1cb6ddab34b6"
      }
  };

IS_FIREBASE_ENABLED

If firebase enabled data will load from firebase, else data will load local services.

SHOW_START_WIZARD

If you enable the wizard, it will appear when you run the app.

SUBSCRIBE

Pop-up for subscribe

FIREBASE_CONFIG

If you want to use firebase, you have to create firebase project and set proper data. How to create an ionic project?

After you create firebase, you will need to import JSON file to the database.

DOWNLOAD JSON FILE :

Ionic UI Theme/Template App – Billy

Lazy Loading

All our components support lazy loading. Learn more about lazy model

If you have any questions you can always contact us and our support will get in touch with you as soon as possible.

Can we use components without Lazy loading?

Yes, it is possible.

You only need to import component in the app module.

      Example:

      import { ExpandableLayout1 } from '../components/list-view/layout-1/expandable-layout-1'
      import { ExpandableLayout2 } from '../components/list-view/layout-2/expandable-layout-2'
      import { ExpandableLayout3 } from '../components/list-view/layout-3/expandable-layout-3'


       @NgModule({
        declarations: [
          MyApp,ExpandableLayout1,ExpandableLayout2,ExpandableLayout3
        ],
        imports: [
          BrowserModule,
          HttpModule,
          IonicModule.forRoot(MyApp),
          AngularFireModule.initializeApp(AppSettings.FIREBASE_CONFIG),
          AngularFireDatabaseModule, AngularFireAuthModule
        ],
        bootstrap: [IonicApp],
        entryComponents: [
        MyApp,ExpandableLayout1,ExpandableLayout2,ExpandableLayout3
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
      })

      and remove file src/components/list-view/layout-1/expandable-layout-1.module.ts from.

How to set colors

  1. Open folder theme path "src/theme" and open variables.css
  2. Delete old content in root variables.css
              Example:
    
              :root {
    
               /*
                 Delate old content (ALL VARIABLES)
    
               */
    
              }
  3. Open in your App folder themes-color path "src/theme/themes-color"
  4. Open scss whose name is like the name of the selected color
                Example:
    
                .example-color {
    
                /*
    
                content of example-color (ALL VARIABLES)
    
                */
    
                              }
  5. Copy the content of the selected scss
  6. And paste copy content of the selected scss in root variables.css
              Example:
    
              :root {
                /*
    
                content of example-color (ALL VARIABLES)
    
                */
              }
    How to color change my application Example video instruction this is link

How to set animations

We made 10 Shape animations:

  1. FadeIn Up
  2. FadeIn Left
  3. BounceIn
  4. ZoomIn
  5. BounceIn Left
  6. FadeIn
  7. BounceIn Right
  8. SlideIn Left
  9. SlideIn Up
  10. FadeIn Righ

And add duration animation:

  1. animation-slow
  2. animation-fast
  3. animation-normal

All name and duration animations you can find in animation.scss file path (NameApp/src/theme/animation.scss)

Example animations List with items

<ion-list appAnimateItems className="fadeInRight"> /* Name Animation */
<ion-item *ngFor="let entry of data"
(click)="onItemClickFunc(entry)"
class="animation-fast opacity-0"> /* Duration Animation */

/* Content items */>

</ion-item >
</ion-list >

Example animations Row with Column

<ion-row appAnimateItems className="bounceIn"> /* Name Animation */
<ion-col size="12" size-sm="6"
*ngFor="let item of data.items"
class="animation-slow opacity-0"> /* Duration Animation */

/* Content items */>

</ion-col >
</ion-row >

How to add animation in my application Example video instruction this is link

How To Do (Examples)

  1. How To Create Single Page
  2. How To Change Color
  3. How To Add Animations

HOW TO ADD LIST VIEW COMPONENT

Expandable - expandable-list-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/expandable-list/expandable-list-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
    import { ExpandableListLayout1Page } from './expandable-list/expandable-list-layout-1/expandable-list-layout-1.page';
    
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    import { IonicModule } from '@ionic/angular';
    
    @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      IonicModule
    ],
    
    declarations: [
      ExpandableListLayout1Page
    ],
    
    exports: [
    ExpandableListLayout1Page
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    
    export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
      import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
      import { CommonModule } from '@angular/common';
      import { FormsModule } from '@angular/forms';
      import { IonicModule } from '@ionic/angular';
      import { RouterModule } from '@angular/router';
      import { SharedModule } from './../../components/shared.module';
      import { yourPageName } from './your-page-name.page';
    
      @NgModule({
        imports: [
          CommonModule,
          FormsModule,
          IonicModule,
          SharedModule,
          RouterModule.forChild([
            {
              path: '',
              component: yourPageName
            }
          ])
        ],
        declarations: [yourPageName],
        exports: [yourPageName],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
      })
      export class YourPageNamePageModule { } 
  6. Add component to your page your-page-name.html
    <cs-expandable-list-layout-1 [data]="data"></cs-expandable-list-layout-1>
  7. Data you will find in src/app/services/list-view-expandable-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onLike = new EventEmitter();
              @Output() onFavorite = new EventEmitter();
              @Output() onShare = new EventEmitter();

EXPANDABLE – expandable-list-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/expandable-list/expandable-list-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
    import { ExpandableListLayout2Page } from './expandable-list/expandable-list-layout-2/expandable-list-layout-2.page';
    
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    import { IonicModule } from '@ionic/angular';
    
    @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      IonicModule
    ],
    
    declarations: [
      ExpandableListLayout2Page
    ],
    
    exports: [
    ExpandableListLayout2Page
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    
    export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    import { IonicModule } from '@ionic/angular';
    import { RouterModule } from '@angular/router';
    import { SharedModule } from './../../components/shared.module';
    import { yourPageName } from './your-page-name.page';
    
    @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      IonicModule,
      SharedModule,
      RouterModule.forChild([
        {
          path: '',
          component: yourPageName
        }
      ])
    ],
    declarations: [yourPageName],
    exports: [yourPageName],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
    <cs-expandable-list-layout-2 [data]="data"></cs-expandable-list-layout-2>
    
  7. Data you will find in src/app/services/list-view-expandable-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();

EXPANDABLE – expandable-list-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/expandable-list/expandable-list-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
    import { ExpandableListLayout3Page } from './expandable-list/expandable-list-layout-3/expandable-list-layout-3.page';
    
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    import { IonicModule } from '@ionic/angular';
    
    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule
      ],
    
      declarations: [
        ExpandableListLayout3Page
      ],
    
      exports: [
      ExpandableListLayout3Page
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    
    export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    import { IonicModule } from '@ionic/angular';
    import { RouterModule } from '@angular/router';
    import { SharedModule } from './../../components/shared.module';
    import { yourPageName } from './your-page-name.page';
    
    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        SharedModule,
        RouterModule.forChild([
          {
            path: '',
            component: yourPageName
          }
        ])
      ],
      declarations: [yourPageName],
      exports: [yourPageName],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
    <cs-expandable-list-layout-3 [data]="data"></cs-expandable-list-layout-3>
    
  7. Data you will find in src/app/services/list-view-expandable-service.ts
  8. Events:
     @Output() onItemClick = new EventEmitter();

DRAG AND DROP – drag-and-drop-list-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/drag-and-drop-list/drag-and-drop-list-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
    import {  DragAndDropListLayout1Page  } from './drag-and-drop-list/drag-and-drop-list-layout-1/drag-and-drop-list-layout-1.page';
    
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    import { IonicModule } from '@ionic/angular';
    
    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule
      ],
    
      declarations: [
        DragAndDropListLayout1Page
     ],
    
      exports: [
        DragAndDropListLayout1Page
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    
    export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    import { IonicModule } from '@ionic/angular';
    import { RouterModule } from '@angular/router';
    import { SharedModule } from './../../components/shared.module';
    import { yourPageName } from './your-page-name.page';
    
    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        SharedModule,
        RouterModule.forChild([
          {
            path: '',
            component: yourPageName
          }
        ])
      ],
      declarations: [yourPageName],
      exports: [yourPageName],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
    <cs-drag-and-drop-list-layout-1 [data]="data"></cs-drag-and-drop-list-layout-1>
    
  7. Data you will find in src/app/services/list-view-drag-and-drop-service.ts
  8. Events:
                          @Output() onItemClick = new EventEmitter();

DRAG AND DROP – drag-and-drop-list-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/drag-and-drop-list/drag-and-drop-list-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  DragAndDropListLayout2Page  } from './drag-and-drop-list/drag-and-drop-list-layout-2/drag-and-drop-list-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  DragAndDropListLayout2Page
               ],
    
                exports: [
                  DragAndDropListLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-drag-and-drop-list-layout-2 [data]="data"></cs-drag-and-drop-list-layout-2>
    
  7. Data you will find in src/app/services/list-view-drag-and-drop-service.ts
  8. Events:
            @Output() onItemClick = new EventEmitter();
            @Output() onProceed = new EventEmitter();

DRAG AND DROP – drag-and-drop-list-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/drag-and-drop-list/drag-and-drop-list-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  DragAndDropListLayout2Page  } from './drag-and-drop-list/drag-and-drop-list-layout-3/drag-and-drop-list-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  DragAndDropListLayout3Page
               ],
    
                exports: [
                  DragAndDropListLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
                 <cs-drag-and-drop-list-layout-3 [data]="data"></cs-drag-and-drop-list-layout-3>
    
  7. Data you will find in src/app/services/list-view-drag-and-drop-service.ts
  8. Events:
    @Output() onItemClick = new EventEmitter();

GOOGLE CARD – google-card-list-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/google-card-list/google-card-list-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  GoogleCardListLayout1Page } from './google-card-list/google-card-list-layout-1/google-card-list-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  GoogleCardListLayout1Page
                ],
    
                exports: [
                  GoogleCardListLayout1Page
                ],
    
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
    <cs-google-card-list-layout-1 [data]="data"></cs-google-card-list-layout-1>
  7. Data you will find in src/app/services/list-view-google-card-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onFavorite = new EventEmitter();
              @Output() onLike = new EventEmitter();
              @Output() onShare = new EventEmitter();

GOOGLE CARD – google-card-list-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/google-card-list/google-card-list-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  GoogleCardListLayout2Page } from './google-card-list/google-card-list-layout-2/google-card-list-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  GoogleCardListLayout2Page
               ],
    
                exports: [
                  GoogleCardListLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-google-card-list-layout-2 [data]="data"></cs-google-card-list-layout-2>
  7. Data you will find in src/app/services/list-view-google-card-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onExplore = new EventEmitter();
              @Output() onShare = new EventEmitter();

GOOGLE CARD – google-card-list-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/google-card-list/google-card-list-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  GoogleCardListLayout3Page } from './google-card-list/google-card-list-layout-3/google-card-list-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  GoogleCardListLayout3Page
               ],
    
                exports: [
                  GoogleCardListLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html <cs-google-card-list-layout-3 [data]="data"></cs-google-card-list-layout-3>
  7. Data you will find in src/app/services/list-view-google-card-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();

GOOGLE CARD – google-card-list-layout-4

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/google-card-list/google-card-list-layout-4 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  GoogleCardListLayout4Page } from './google-card-list/google-card-list-layout-4/google-card-list-layout-4.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  GoogleCardListLayout4Page
               ],
    
                exports: [
                  GoogleCardListLayout4Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-google-card-list-layout-4 [data]="data"></cs-google-card-list-layout-4>
  7. Data you will find in src/app/services/list-view-google-card-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();

Swipe To Dismiss – swipe-to-dismiss-list-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/swipe-to-dismiss-list/swipe-to-dismiss-list-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SwipeToDismissListLayout1Page } from './swipe-to-dismiss-list/swipe-to-dismiss-list-layout-1/swipe-to-dismiss-list-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SwipeToDismissListLayout1Page
               ],
    
                exports: [
                  SwipeToDismissListLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-swipe-to-dismiss-list-layout-1 [data]="data"></cs-swipe-to-dismiss-list-layout-1>
  7. Data you will find in src/app/services/list-view-swipe-to-dismiss-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onLike = new EventEmitter();
              @Output() onFavorite = new EventEmitter();
              @Output() onShare = new EventEmitter();
              @Output() onUndo = new EventEmitter();
              @Output() onDelete = new EventEmitter();

Swipe To Dismiss – swipe-to-dismiss-list-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/swipe-to-dismiss-list/swipe-to-dismiss-list-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SwipeToDismissListLayout2Page } from './swipe-to-dismiss-list/swipe-to-dismiss-list-layout-2/swipe-to-dismiss-list-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SwipeToDismissListLayout2Page
               ],
    
                exports: [
                  SwipeToDismissListLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-swipe-to-dismiss-list-layout-2 [data]="data"></cs-swipe-to-dismiss-list-layout-2>
  7. Data you will find in src/app/services/list-view-swipe-to-dismiss-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onUndo = new EventEmitter();
              @Output() onDelete = new EventEmitter();

Swipe To Dismiss – swipe-to-dismiss-list-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/swipe-to-dismiss-list/swipe-to-dismiss-list-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SwipeToDismissListLayout3Page } from './swipe-to-dismiss-list/swipe-to-dismiss-list-layout-3/swipe-to-dismiss-list-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SwipeToDismissListLayout3Page
               ],
    
                exports: [
                  SwipeToDismissListLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-swipe-to-dismiss-list-layout-3 [data]="data"></cs-swipe-to-dismiss-list-layout-3>
  7. Data you will find in src/app/services/list-view-swipe-to-dismiss-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onUndo = new EventEmitter();
              @Output() onDelete = new EventEmitter();

HOW TO PARALEX COMPONENT

PARALLAX – parallax-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/parallax/parallax-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ParallaxLayout1Page } from './parallax/parallax-layout-1/parallax-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ParallaxLayout1Page
               ],
    
                exports: [
                  ParallaxLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-parallax-layout-1 [data]="data"></cs-parallax-layout-1>
  7. Data you will find in src/app/services/parallax-service.ts
  8. Events:
              @Output() onLike = new EventEmitter();
              @Output() onFavorite = new EventEmitter();
              @Output() onShare = new EventEmitter();
              @Output() onItemClick = new EventEmitter();

PARALLAX – parallax-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/parallax/parallax-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ParallaxLayout2Page } from './parallax/parallax-layout-2/parallax-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ParallaxLayout2Page
               ],
    
                exports: [
                  ParallaxLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-parallax-layout-2 [data]="data"></cs-parallax-layout-2>
  7. Data you will find in src/app/services/parallax-service.ts
  8. Events:
              @Output() onLike = new EventEmitter();
              @Output() onFavorite = new EventEmitter();
              @Output() onShare = new EventEmitter();
              @Output() onItemClick = new EventEmitter();

PARALLAX – parallax-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/parallax/parallax-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ParallaxLayout3Page } from './parallax/parallax-layout-3/parallax-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ParallaxLayout3Page
               ],
    
                exports: [
                  ParallaxLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-parallax-layout-3 [data]="data"></cs-parallax-layout-3>
  7. Data you will find in src/app/services/parallax-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onFavorite = new EventEmitter();

PARALLAX – parallax-layout-4

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/parallax/parallax-layout-4 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ParallaxLayout4Page } from './parallax/parallax-layout-4/parallax-layout-4.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ParallaxLayout4Page
               ],
    
                exports: [
                  ParallaxLayout4Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-parallax-layout-4 [data]="data"></cs-parallax-layout-4>
  7. Data you will find in src/app/services/parallax-service.ts
  8. Events:
              @Output() onLike = new EventEmitter();
              @Output() onFavorite = new EventEmitter();
              @Output() onShare = new EventEmitter();
              @Output() onItemClick = new EventEmitter();
              @Output() onRates = new EventEmitter();

LOGIN – login-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/login/login-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  LoginLayout1Page } from './login/login-layout-1/login-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  LoginLayout1Page
               ],
    
                exports: [
                  LoginLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-login-layout-1 [data]="data"></cs-login-layout-1>
  7. Data you will find in src/app/services/login-service.ts
  8. Events:
              @Output() onLogin = new EventEmitter();
              @Output() onRegister = new EventEmitter();
              @Output() onSkip = new EventEmitter();
              @Output() onFacebook = new EventEmitter();
              @Output() onTwitter = new EventEmitter();
              @Output() onGoogle = new EventEmitter();
              @Output() onPinterest = new EventEmitter();

LOGIN – login-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/login/login-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  LoginLayout2Page } from './login/login-layout-2/login-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  LoginLayout2Page
               ],
    
                exports: [
                  LoginLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-login-layout-2 [data]="data"></cs-login-layout-2>
  7. Data you will find in src/app/services/login-service.ts
  8. Events:
              @Output() onLogin = new EventEmitter();
              @Output() onRegister = new EventEmitter();
              @Output() onSkip = new EventEmitter();
              @Output() onFacebook = new EventEmitter();
              @Output() onTwitter = new EventEmitter();
              @Output() onGoogle = new EventEmitter();
              @Output() onPinterest = new EventEmitter();

Forget Password Simple – forgot-password-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/forgot-password/forgot-password-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import { ForgotPasswordLayout1Page } from './forgot-password/forgot-password-layout-1/forgot-password-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ForgotPasswordLayout1Page
               ],
    
                exports: [
                  ForgotPasswordLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-forgot-password-layout-1 [data]="data"></cs-forgot-password-layout-1>
  7. Data you will find in src/app/services/forget-password-services.ts
  8. Events:
              @Output() onSend = new EventEmitter();

Forget Password With Background – forgot-password-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/forgot-password/forgot-password-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import { ForgotPasswordLayout2Page } from './forgot-password/forgot-password-layout-2/forgot-password-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ForgotPasswordLayout2Page
               ],
    
                exports: [
                  ForgotPasswordLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-forgot-password-layout-2 [data]="data"></cs-forgot-password-layout-2>
  7. Data you will find in src/app/services/forget-password-services.ts
  8. Events:
              @Output() onSend = new EventEmitter();

New Password With Background – new-password-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/new-password/new-password-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import { NewPasswordLayout1Page } from './new-password/new-password-layout-1/new-password-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  NewPasswordLayout1Page
               ],
    
                exports: [
                  NewPasswordLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-new-password-layout-1 [data]="data"></cs-new-password-layout-1>
  7. Data you will find in src/app/services/forget-password-services.ts
  8. Events:
              @Output() onSend = new EventEmitter();

New Password Simple – new-password-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/new-password/new-password-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import { NewPasswordLayout1Page } from './new-password/new-password-layout-1/new-password-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  NewPasswordLayout1Page
               ],
    
                exports: [
                  NewPasswordLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-new-password-layout-2 [data]="data"></cs-new-password-layout-2>
  7. Data you will find in src/app/services/new-password-services.ts
  8. Events:
              @Output() onSend = new EventEmitter();

REGISTER– register-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/register/register-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  RegisterLayout1Page } from './register/register-layout-1/register-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  RegisterLayout1Page
               ],
    
                exports: [
                  RegisterLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-register-layout-1 [data]="data"></cs-register-layout-1>
  7. Data you will find in src/app/services/register-service.ts
  8. Events:
              @Output() onRegister = new EventEmitter();
              @Output() onSkip = new EventEmitter();

REGISTER– register-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/register/register-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  RegisterLayout2Page } from './register/register-layout-2/register-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  RegisterLayout2Page
               ],
    
                exports: [
                  RegisterLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-register-layout-2 [data]="data"></cs-register-layout-2>
  7. Data you will find in src/app/services/register-service.ts
  8. Events:
              @Output() onRegister = new EventEmitter();
              @Output() onSkip = new EventEmitter();

SPALASH SCREEN – splash-screen-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/splash-screen/splash-screen-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SplashScreenLayout1Page } from './splash-screen/splash-screen-layout-1/splash-screen-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SplashScreenLayout1Page
               ],
    
                exports: [
                  SplashScreenLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-splash-screen-layout-1 [data]="data">/<cs-splash-screen-layout-1>
  7. Data you will find in src/app/services/splash-screen-service.ts
  8. Events:
              @Output() onRedirect = new EventEmitter();

SPALASH SCREEN – splash-screen-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/splash-screen/splash-screen-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SplashScreenLayout2Page } from './splash-screen/splash-screen-layout-2/splash-screen-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SplashScreenLayout2Page
               ],
    
                exports: [
                  SplashScreenLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-splash-screen-layout-2 [data]="data"></cs-splash-screen-layout-2>
  7. Data you will find in src/app/services/splash-screen-service.ts
  8. Events:
              @Output() onRedirect = new EventEmitter();

SPALASH SCREEN – splash-screen-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/splash-screen/splash-screen-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SplashScreenLayout3Page } from './splash-screen/splash-screen-layout-3/splash-screen-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SplashScreenLayout3Page
               ],
    
                exports: [
                  SplashScreenLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-splash-screen-layout-3 [data]="data"></cs-splash-screen-layout-3>
  7. Data you will find in src/app/services/splash-screen-service.ts
  8. Events:
              @Output() onRedirect = new EventEmitter();

CHECK BOX – check-box-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/check-box/check-box-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  CheckBoxLayout1Page } from './check-box/check-box-layout-1/check-box-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  CheckBoxLayout1Page
               ],
    
                exports: [
                  CheckBoxLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-check-box-layout-1 [data]="data"></cs-check-box-layout-1>
  7. Data you will find in src/app/services/check-box-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();

With Avatar

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/check-box/check-box-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  CheckBoxLayout2Page } from './check-box/check-box-layout-2/check-box-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  CheckBoxLayout2Page
               ],
    
                exports: [
                  CheckBoxLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-check-box-layout-2 [data]="data"></cs-check-box-layout-2>
  7. Data you will find in src/app/services/check-box-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();

Simple 2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/check-box/check-box-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  CheckBoxLayout3Page } from './check-box/check-box-layout-3/check-box-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  CheckBoxLayout3Page
               ],
    
                exports: [
                  CheckBoxLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-check-box-layout-3 [data]="data"></cs-check-box-layout-3>
  7. Data you will find in src/app/services/check-box-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();

HOW TO ADD SPINNER COMPONENT

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/spinner download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SpinnerPage } from './spinner/spinner.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SpinnerPage
               ],
    
                exports: [
                  SpinnerPage
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-spinner [data]="data"></cs-spinner>
  7. Data you will find in src/app/services/spinner-service.ts

SEARCH BAR – search-bar-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/search-bar/search-bar-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SearchBarLayout3Page } from './search-bar/search-bar-layout-1/search-bar-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SearchBarLayout3Page
               ],
    
                exports: [
                  SearchBarLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-search-bar-layout-1 [data]="data"></cs-search-bar-layout-1>
  7. Data you will find in src/app/services/search-bar-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onTextChange = new EventEmitter();

SEARCH BAR – search-bar-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/search-bar/search-bar-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SearchBarLayout1Page } from './search-bar/search-bar-layout-2/search-bar-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SearchBarLayout1Page
               ],
    
                exports: [
                  SearchBarLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-search-bar-layout-2 [data]="data"></cs-search-bar-layout-2>
  7. Data you will find in src/app/services/search-bar-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onTextChange = new EventEmitter();

SEARCH BAR – search-bar-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/search-bar/search-bar-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SearchBarLayout3Page } from './search-bar/search-bar-layout-3/search-bar-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SearchBarLayout3Page
               ],
    
                exports: [
                  SearchBarLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-search-bar-layout-3 [data]="data"></cs-search-bar-layout-3>
  7. Data you will find in src/app/services/search-bar-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onTextChange = new EventEmitter();

WIZARD – wizard-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/wizard/wizard-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  WizardLayout1Page } from './wizard/wizard-layout-1/wizard-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  WizardLayout1Page
               ],
    
                exports: [
                  WizardLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-wizard-layout-1 [data]="data"></cs-wizard-layout-1>
  7. Data you will find in src/app/services/wizard-service.ts
  8. Events:
              @Output() onFinish = new EventEmitter();
              @Output() onNext = new EventEmitter();
              @Output() onPrevious = new EventEmitter();

WIZARD – wizard-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/wizard/wizard-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  WizardLayout2Page } from './wizard/wizard-layout-2/wizard-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  WizardLayout2Page
               ],
    
                exports: [
                  WizardLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-wizard-layout-2 [data]="data"></cs-wizard-layout-2>
  7. Data you will find in src/app/services/wizard-service.ts
  8. Events:
              @Output() onFinish = new EventEmitter();
              @Output() onNext = new EventEmitter();
              @Output() onPrevious = new EventEmitter();

WIZARD – wizard-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/wizard/wizard-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  WizardLayout3Page } from './wizard/wizard-layout-3/wizard-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  WizardLayout3Page
               ],
    
                exports: [
                  WizardLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-wizard-layout-3 [data]="data"></cs-wizard-layout-3>
  7. Data you will find in src/app/services/wizard-service.ts
  8. Events:
              @Output() onFinish = new EventEmitter();
              @Output() onNext = new EventEmitter();
              @Output() onPrevious = new EventEmitter();

WIZARD – wizard-layout-4

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/wizard/wizard-layout-4 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  WizardLayout3Page } from './wizard/wizard-layout-4/wizard-layout-4.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  WizardLayout4Page
               ],
    
                exports: [
                  WizardLayout4Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
              <cs-wizard-layout-4 [data]="data"></cs-wizard-layout-4>
  7. Data you will find in src/app/services/wizard-service.ts
  8. Events:
              @Output() onFinish = new EventEmitter();
              @Output() onNext = new EventEmitter();
              @Output() onPrevious = new EventEmitter();

How to integaration Google Maps

Add you Maps key in shared.module.ts path('YourNameApp/src/app/components/shared.module.ts')

Gmaps

MAP_KEY

If you want to use component with google maps you have to create API key for the app. How to create API key for maps? Google documentation how to create API key: Maps JavaScript API

GOOGLE MAPS – map-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/map/map-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
            import {  MapLayout1Page } from './map/map-layout-1/map-layout-1.page';
    
            import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
            import { CommonModule } from '@angular/common';
            import { FormsModule } from '@angular/forms';
            import { IonicModule } from '@ionic/angular';
    
            @NgModule({
              imports: [
                CommonModule,
                FormsModule,
                IonicModule
              ],
    
              declarations: [
                MapLayout1Page
             ],
    
              exports: [
                MapLayout1Page
              ],
              schemas: [CUSTOM_ELEMENTS_SCHEMA]
            })
    
            export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
            import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
            import { CommonModule } from '@angular/common';s
            import { FormsModule } from '@angular/forms';
            import { IonicModule } from '@ionic/angular';
            import { RouterModule } from '@angular/router';
            import { SharedModule } from './../../components/shared.module';
            import { yourPageName } from './your-page-name.page';
    
            @NgModule({
              imports: [
                CommonModule,
                FormsModule,
                IonicModule,
                SharedModule,
                RouterModule.forChild([
                  {
                    path: '',
                    component: yourPageName
                  }
                ])
              ],
              declarations: [yourPageName],
              exports: [yourPageName],
              schemas: [CUSTOM_ELEMENTS_SCHEMA]
            })
            export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-map-layout-1 [data]="data"></cs-map-layout-1>
  7. Data you will find in src/app/services/maps-service.ts
  8. Events:
            @Output() onRates = new EventEmitter();
            @Output() onLike = new EventEmitter();
            @Output() onFavorite = new EventEmitter();
            @Output() onShare = new EventEmitter();

GOOGLE MAPS – map-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/map/map-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  MapLayout2Page } from './map/map-layout-2/map-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  MapLayout2Page
               ],
    
                exports: [
                  MapLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-map-layout-2 [data]="data"></cs-map-layout-2>
  7. Data you will find in src/app/services/maps-service.ts
  8. Events:
              @Output() onLike = new EventEmitter();
              @Output() onFavorite = new EventEmitter();
              @Output() onShare = new EventEmitter();

GOOGLE MAPS – map-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/map/map-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  MapLayout3Page } from './map/map-layout-3/map-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  MapLayout3Page
               ],
    
                exports: [
                  MapLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-map-layout-3 [data]="data"></cs-map-layout-3>
  7. Data you will find in src/app/services/maps-service.ts
  8. Events:
    
                            

RADIO BUTTON – radio-button-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/radio-button/radio-button-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  RadioButtonLayout1Page } from './radio-button/radio-button-layout-1/radio-button-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  RadioButtonLayout1Page
               ],
    
                exports: [
                  RadioButtonLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-radio-button-layout-1 [data]="data"></cs-radio-button-layout-1>
  7. Data you will find in src/app/services/radio-button-service.ts
  8. Events:
           @Output() onItemClick = new EventEmitter();

RADIO BUTTON – radio-button-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/radio-button/radio-button-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  RadioButtonLayout2Page } from './radio-button/radio-button-layout-2/radio-button-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  RadioButtonLayout2Page
               ],
    
                exports: [
                  RadioButtonLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-radio-button-layout-2 [data]="data"></cs-radio-button-layout-2>
  7. Data you will find in src/app/services/radio-button-service.ts
  8. Events:
            @Output() onItemClick = new EventEmitter();

RADIO BUTTON – radio-button-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/radio-button/radio-button-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  RadioButtonLayout3Page } from './radio-button/radio-button-layout-3/radio-button-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  RadioButtonLayout3Page
               ],
    
                exports: [
                  RadioButtonLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-radio-button-layout-3 [data]="data"></cs-radio-button-layout-3>
  7. Data you will find in src/app/services/radio-button-service.ts
  8. Events:
            @Output() onItemClick = new EventEmitter();

RANGE COMPONENT – range-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/range/range-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  RangeLayout1Page } from './range/range-layout-1/range-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  RangeLayout1Page
               ],
    
                exports: [
                  RangeLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-range-layout-1 [data]="data"></cs-range-layout-1>
  7. Data you will find in src/app/services/range-service.ts
  8. Events:
              @Output() onChange = new EventEmitter();

RANGE COMPONENT – range-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/range/range-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  RangeLayout2Page } from './range/range-layout-2/range-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  RangeLayout2Page
               ],
    
                exports: [
                  RangeLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-range-layout-2 [data]="data"></cs-range-layout-2>
  7. Data you will find in src/app/services/range-service.ts
  8. Events:
              @Output() onChange = new EventEmitter();

RANGE COMPONENT – range-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/range/range-layout-4 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  RangeLayout4Page } from './range/range-layout-4/range-layout-4.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  RangeLayout4Page
               ],
    
                exports: [
                  RangeLayout4Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-range-layout-4 [data]="data"></cs-range-layout-4>
  7. Data you will find in src/app/services/range-service.ts
  8. Events:
              @Output() onChange = new EventEmitter();

RANGE COMPONENT – range-layout-4

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/range/range-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  RangeLayout3Page } from './range/range-layout-3/range-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  RangeLayout3Page
               ],
    
                exports: [
                  RangeLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-range-layout-3 [data]="data"></cs-range-layout-3>
  7. Data you will find in src/app/services/range-service.ts
  8. Events:
              @Output() onChange = new EventEmitter();

TOGGLE COMPONENT – toggle-button-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/toggle-button/toggle-button-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ToggleButtonLayout1Page } from './toggle-button/toggle-button-layout-1/toggle-button-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ToggleButtonLayout1Page
               ],
    
                exports: [
                 ToggleButtonLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-toggle-button-layout-1 [data]="data"></cs-toggle-button-layout-1>
  7. Data you will find in src/app/services/toggle-service.ts
  8. Events:
               @Output() onItemClick = new EventEmitter();

TOGGLE COMPONENT – toggle-button-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/toggle-button/toggle-button-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ToggleButtonLayout2Page } from './toggle-button/toggle-button-layout-2/toggle-button-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ToggleButtonLayout2Page
               ],
    
                exports: [
                 ToggleButtonLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-toggle-button-layout-2 [data]="data"></cs-toggle-button-layout-2>
  7. Data you will find in src/app/services/toggle-service.ts
  8. Events:
               @Output() onItemClick = new EventEmitter();

TOGGLE COMPONENT – toggle-button-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/toggle-button/toggle-button-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ToggleButtonLayout3Page } from './toggle-button/toggle-button-layout-3/toggle-button-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ToggleButtonLayout3Page
               ],
    
                exports: [
                 ToggleButtonLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-toggle-button-layout-3 [data]="data"></cs-toggle-button-layout-3>
  7. Data you will find in src/app/services/toggle-service.ts
  8. Events:
               @Output() onItemClick = new EventEmitter();

SELECT COMPONENT – select-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/select/select-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SelectLayout1Page } from './select/select-layout-1/select-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SelectLayout1Page
               ],
    
                exports: [
                 SelectLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-select-layout-1 [data]="data"></cs-select-layout-1>
  7. Data you will find in src/app/services/select-service.ts
  8. Events:
             @Output() onChange = new EventEmitter();

SELECT COMPONENT – select-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/select/select-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SelectLayout2Page } from './select/select-layout-2/select-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SelectLayout2Page
               ],
    
                exports: [
                 SelectLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-select-layout-2 [data]="data"></cs-select-layout-2>
  7. Data you will find in src/app/services/select-service.ts
  8. Events:
             @Output() onChange = new EventEmitter();

SELECT COMPONENT – select-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/select/select-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SelectLayout3Page } from './select/select-layout-3/select-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SelectLayout3Page
               ],
    
                exports: [
                 SelectLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-select-layout-3 [data]="data"></cs-select-layout-3>
  7. Data you will find in src/app/services/select-service.ts
  8. Events:
             @Output() onChange = new EventEmitter();

SELECT COMPONENT – select-layout-4

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/select/select-layout-4 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SelectLayout4Page } from './select/select-layout-4/select-layout-4.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SelectLayout4Page
               ],
    
                exports: [
                 SelectLayout4Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-select-layout-4 [data]="data"></cs-select-layout-4>
  7. Data you will find in src/app/services/select-service.ts
  8. Events:
            @Output() onChangeMonth = new EventEmitter();
            @Output() onChangeYears = new EventEmitter();
    

SELECT COMPONENT – select-layout-5

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/select/select-layout-5 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SelectLayout5Page } from './select/select-layout-5/select-layout-5.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SelectLayout5Page
               ],
    
                exports: [
                 SelectLayout5Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-select-layout-5 [data]="data"></cs-select-layout-5>
  7. Data you will find in src/app/services/select-service.ts
  8. Events:
              @Output() onChange = new EventEmitter();
    

SELECT COMPONENT – select-layout-6

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/select/select-layout-6 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SelectLayout5Page } from './select/select-layout-6/select-layout-6.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SelectLayout6Page
               ],
    
                exports: [
                 SelectLayout6Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-select-layout-6 [data]="data"></cs-select-layout-6>
  7. Data you will find in src/app/services/select-service.ts
  8. Events:
              @Output() onChangeMonth = new EventEmitter();
              @Output() onChangeYears = new EventEmitter();
    

ACTION SHEET – action-sheet-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/action-sheet/action-sheet-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ActionSheetLayout1Page } from './action-sheet/action-sheet-layout-1/action-sheet-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ActionSheetLayout1Page
               ],
    
                exports: [
                 ActionSheetLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-action-sheet-layout-1 [data]="data"></cs-action-sheet-layout-1>
  7. Data you will find in src/app/services/action-sheet-service.ts
  8. Events:
              @Output() onProceed = new EventEmitter();
              @Output() onItemClick = new EventEmitter();
              @Output() onItemClickActionSheet = new EventEmitter();
              @Output() onChangeScroll = new EventEmitter();
    

ACTION SHEET – action-sheet-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/action-sheet/action-sheet-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ActionSheetLayout2Page } from './action-sheet/action-sheet-layout-2/action-sheet-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ActionSheetLayout2Page
               ],
    
                exports: [
                 ActionSheetLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-action-sheet-layout-2 [data]="data"></cs-action-sheet-layout-2>
  7. Data you will find in src/app/services/action-sheet-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onItemClickActionSheet = new EventEmitter();
              @Output() onChangeScroll = new EventEmitter();
              @Output() onComment = new EventEmitter();
              @Output() onLike = new EventEmitter();
    

ACTION SHEET – action-sheet-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/action-sheet/action-sheet-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ActionSheetLayout3Page } from './action-sheet/action-sheet-layout-3/action-sheet-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ActionSheetLayout3Page
               ],
    
                exports: [
                 ActionSheetLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-action-sheet-layout-3 [data]="data"></cs-action-sheet-layout-3>
  7. Data you will find in src/app/services/action-sheet-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onItemClickActionSheet = new EventEmitter();
              @Output() onChangeScroll = new EventEmitter();
    

IMAGE GALLERY – image-gallery-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/image-gallery/image-gallery-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ImageGalleryLayout1Page } from './image-gallery/image-gallery-layout-1/image-gallery-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ImageGalleryLayout1Page
               ],
    
                exports: [
                 ImageGalleryLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-image-gallery-layout-1 [data]="data"></cs-image-gallery-layout-1>
  7. Data you will find in src/app/services/image-gallery-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onFavorite = new EventEmitter();
    

IMAGE GALLERY – image-gallery-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/image-gallery/image-gallery-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ImageGalleryLayout2Page } from './image-gallery/image-gallery-layout-2/image-gallery-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ImageGalleryLayout2Page
               ],
    
                exports: [
                 ImageGalleryLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-image-gallery-layout-2 [data]="data"></cs-image-gallery-layout-2>
  7. Data you will find in src/app/services/image-gallery-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onFavorite = new EventEmitter();
    

IMAGE GALLERY – image-gallery-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/image-gallery/image-gallery-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ImageGalleryLayout3Page } from './image-gallery/image-gallery-layout-3/image-gallery-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ImageGalleryLayout3Page
               ],
    
                exports: [
                 ImageGalleryLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-image-gallery-layout-3 [data]="data"></cs-image-gallery-layout-3>
  7. Data you will find in src/app/services/image-gallery-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onFavorite = new EventEmitter();
    

TABS COMPONENT – tab-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/tab/tab-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import { TabLayout1PageModule } from './tab/tab-layout-1/tab-layout-1.module';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  TabLayout1PageModule
                ],
                declarations: [
                  TabLayout1PageModule
               ],
                exports: [
                 TabLayout1PageModule
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-tab-layout-1 [data]="data"></cs-tab-layout-1>
  7. Data you will find in src/app/services/tabs-service.ts
  8. If you want to add some event you have to add your bussines logic to page to that component. ./tab/tab-layout-1/pages/tab-x/

TABS COMPONENT – tab-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/tab/tab-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import { TabLayout2PageModule } from './tab/tab-layout-2/tab-layout-2.module';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  TabLayout2PageModule
                ],
                declarations: [
                  TabLayout2PageModule
               ],
                exports: [
                 TabLayout2PageModule
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-tab-layout-2 [data]="data"></cs-tab-layout-2>
  7. Data you will find in src/app/services/tabs-service.ts
  8. If you want to add some event you have to add your bussines logic to page to that component. ./tab/tab-layout-2/pages/tab-x/

TABS COMPONENT – tab-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/tab/tab-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import { TabLayout3PageModule } from './tab/tab-layout-3/tab-layout-3.module';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  TabLayout3PageModule
                ],
                declarations: [
                  TabLayout3PageModule
               ],
                exports: [
                 TabLayout3PageModule
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-tab-layout-3 [data]="data"></cs-tab-layout-3>
  7. Data you will find in src/app/services/tabs-service.ts
  8. If you want to add some event you have to add your bussines logic to page to that component. ./tab/tab-layout-3/pages/tab-x/

TIME LINE – timeline-box-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/timeline/timeline-box-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  TimeLineLayout1Page } from './timeline/timeline-box-layout-1/timeline-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  TimeLineLayout1Page
               ],
    
                exports: [
                 TimeLineLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-timeline-layout-1 [data]="data"></cs-timeline-layout-1>
  7. Data you will find in src/app/services/time-line-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
    

TIME LINE – timeline-box-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/timeline/timeline-box-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  TimeLineLayout2Page } from './timeline/timeline-box-layout-2/timeline-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  TimeLineLayout2Page
               ],
    
                exports: [
                 TimeLineLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-timeline-layout-2 [data]="data"></cs-timeline-layout-2>
  7. Data you will find in src/app/services/time-line-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
    

TIME LINE – timeline-box-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/timeline/timeline-box-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  TimeLineLayout3Page } from './timeline/timeline-box-layout-3/timeline-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  TimeLineLayout3Page
               ],
    
                exports: [
                 TimeLineLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-timeline-layout-3 [data]="data"></cs-timeline-layout-3>
  7. Data you will find in src/app/services/time-line-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
    

FORMS – forms-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/forms/forms-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  FormsLayout1Page } from './forms/forms-layout-1/forms-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  FormsLayout1Page
               ],
    
                exports: [
                 FormsLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-forms-layout-1 [data]="data"></cs-forms-layout-1>
  7. Data you will find in src/app/services/form-service.ts
  8. Events:
              @Output() onSubmit = new EventEmitter();
    

FORMS – forms-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/forms/forms-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  FormsLayout2Page } from './forms/forms-layout-2/forms-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  FormsLayout2Page
               ],
    
                exports: [
                 FormsLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-forms-layout-2 [data]="data"></cs-forms-layout-2>
  7. Data you will find in src/app/services/form-service.ts
  8. Events:
              @Output() onRates = new EventEmitter();
              @Output() onSubmit = new EventEmitter();
    

FORMS – forms-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/forms/forms-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  FormsLayout3Page } from './forms/forms-layout-3/forms-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  FormsLayout3Page
               ],
    
                exports: [
                 FormsLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-forms-layout-3 [data]="data"></cs-forms-layout-3>
  7. Data you will find in src/app/services/form-service.ts
  8. Events:
              @Output() onSubmit = new EventEmitter();
    

FORMS – forms-layout-4

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/forms/forms-layout-4 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  FormsLayout4Page } from './forms/forms-layout-4/forms-layout-4.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  FormsLayout4Page
               ],
    
                exports: [
                 FormsLayout4Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-forms-layout-4 [data]="data"></cs-forms-layout-4>
  7. Data you will find in src/app/services/form-service.ts
  8. Events:
              @Output() onRates = new EventEmitter();
              @Output() onSubmit = new EventEmitter();
              @Output() onAddImage = new EventEmitter();
    

PAYMENT – payment-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/payment/payment-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  PaymentLayout1Page } from './payment/payment-layout-1/payment-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  PaymentLayout1Page
               ],
    
                exports: [
                 PaymentLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-payment-layout-1 [data]="data"></cs-payment-layout-1>
  7. Data you will find in src/app/services/payment-service.ts
  8. Events:
              @Output() onPay = new EventEmitter();
    

SEGMENT – segment-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/segment/segment-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SegmentListLayout1Page } from './segment/segment-layout-1/segment-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SegmentListLayout1Page
               ],
    
                exports: [
                 SegmentListLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-segment-layout-1 [data]="data"></cs-segment-layout-1>
  7. Data you will find in src/app/services/segment-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
    

SEGMENT – segment-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/segment/segment-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SegmentListLayout2Page } from './segment/segment-layout-2/segment-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SegmentListLayout2Page
               ],
    
                exports: [
                 SegmentListLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-segment-layout-2 [data]="data"></cs-segment-layout-2>
  7. Data you will find in src/app/services/segment-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
    

SEGMENT – segment-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/segment/segment-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  SegmentListLayout3Page } from './segment/segment-layout-3/segment-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  SegmentListLayout3Page
               ],
    
                exports: [
                 SegmentListLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-segment-layout-3 [data]="data"></cs-segment-layout-3>
  7. Data you will find in src/app/services/segment-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onLike = new EventEmitter();
              @Output() onComment = new EventEmitter();
    

Scroll Segment – scroll-segment-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/scroll-segment/scroll-segment-layout-1/ from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ScrollSegmentLayout1Page } from './scroll-segment/scroll-segment-layout-1/scroll-segment-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ScrollSegmentLayout1Page
              ],
    
                exports: [
                ScrollSegmentLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-scroll-segment-layout-1 [data]="data"></cs-scroll-segment-layout-1>
  7. Data you will find in src/app/services/scroll-segment-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onFollowClick = new EventEmitter();
              @Output() onMessageClick = new EventEmitter();
    

Scroll Segment – scroll-segment-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/scroll-segment/scroll-segment-layout-2/ from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ScrollSegmentLayout2Page } from './scroll-segment/scroll-segment-layout-2/scroll-segment-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ScrollSegmentLayout2Page
              ],
    
                exports: [
                ScrollSegmentLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-scroll-segment-layout-2 [data]="data"></cs-scroll-segment-layout-2>
  7. Data you will find in src/app/services/scroll-segment-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onFollowClick = new EventEmitter();
    

Scroll Segment – scroll-segment-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/scroll-segment/scroll-segment-layout-3/ from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ScrollSegmentLayout3Page } from './scroll-segment/scroll-segment-layout-3/scroll-segment-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ScrollSegmentLayout3Page
              ],
    
                exports: [
                ScrollSegmentLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-scroll-segment-layout-3 [data]="data"></cs-scroll-segment-layout-3>
  7. Data you will find in src/app/services/scroll-segment-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
    

Scroll Segment – scroll-segment-layout-4

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/scroll-segment/scroll-segment-layout-4/ from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ScrollSegmentLayout4Page } from './scroll-segment/scroll-segment-layout-4/scroll-segment-layout-4.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ScrollSegmentLayout4Page
              ],
    
                exports: [
                ScrollSegmentLayout4Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-scroll-segment-layout-4 [data]="data"></cs-scroll-segment-layout-4>
  7. Data you will find in src/app/services/scroll-segment-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onFollowClick = new EventEmitter();
              @Output() onMessageClick = new EventEmitter();
    

COMMENTS – comment-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/comment/comment-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  CommentLayout1Page } from './comment/comment-layout-1/comment-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  CommentLayout1Page
               ],
    
                exports: [
                 CommentLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-comment-layout-1 [data]="data"></cs-comment-layout-1>
  7. Data you will find in src/app/services/comment-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
    

COMMENTS – comment-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/comment/comment-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  CommentLayout2Page } from './comment/comment-layout-2/comment-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  CommentLayout2Page
               ],
    
                exports: [
                 CommentLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-comment-layout-2 [data]="data"></cs-comment-layout-2>
  7. Data you will find in src/app/services/comment-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
    

ALERT – alert-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/alert/alert-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  AlertLayout1Page } from './alert/alert-layout-1/alert-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  AlertLayout1Page
               ],
    
                exports: [
                 AlertLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-alert-layout-1 [data]="data"></cs-alert-layout-1>
  7. Data you will find in src/app/services/alert-service.ts
  8. Events:
              @Output() onOkClick = new EventEmitter();
              @Output() onCancelClick = new EventEmitter();
    

ALERT – alert-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/alert/alert-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  AlertLayout2Page } from './alert/alert-layout-2/alert-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  AlertLayout2Page
               ],
    
                exports: [
                 AlertLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-alert-layout-2 [data]="data"></cs-alert-layout-2>
  7. Data you will find in src/app/services/alert-service.ts
  8. Events:
              @Output() onOkClick = new EventEmitter();
              @Output() onCancelClick = new EventEmitter();
              @Output() onComment = new EventEmitter();
              @Output() onLike = new EventEmitter();
    

ALERT – alert-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/alert/alert-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  AlertLayout2Page } from './alert/alert-layout-2/alert-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  AlertLayout2Page
               ],
    
                exports: [
                 AlertLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-alert-layout-3 [data]="data"></cs-alert-layout-3>
  7. Data you will find in src/app/services/alert-service.ts
  8. Events:
              @Output() onOkClick = new EventEmitter();
              @Output() onCancelClick = new EventEmitter();
              @Output() onComment = new EventEmitter();
              @Output() onLike = new EventEmitter();
    

PROFILE – profile-layout-1

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/profile/profile-layout-1 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ProfileLayout1Page } from './profile/profile-layout-1/profile-layout-1.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ProfileLayout1Page
               ],
    
                exports: [
                 ProfileLayout1Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-profile-layout-1 [data]="data"></cs-profile-layout-1>
  7. Data you will find in src/app/services/profile-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onLike = new EventEmitter();
              @Output() onComment = new EventEmitter();
    

PROFILE – profile-layout-2

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/profile/profile-layout-2 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ProfileLayout2Page } from './profile/profile-layout-2/profile-layout-2.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ProfileLayout2Page
               ],
    
                exports: [
                 ProfileLayout2Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-profile-layout-2 [data]="data"></cs-profile-layout-2>
  7. Data you will find in src/app/services/profile-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onLike = new EventEmitter();
              @Output() onComment = new EventEmitter();
    

PROFILE – profile-layout-3

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/profile/profile-layout-3 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ProfileLayout3Page } from './profile/profile-layout-3/profile-layout-3.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
                declarations: [
                  ProfileLayout3Page
               ],
    
                exports: [
                 ProfileLayout3Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-profile-layout-3 [data]="data"></cs-profile-layout-3>
  7. Data you will find in src/app/services/profile-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onLike = new EventEmitter();
              @Output() onComment = new EventEmitter();
    

PROFILE – profile-layout-4

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/profile/profile-layout-4 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ProfileLayout4Page } from './profile/profile-layout-4/profile-layout-4.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
    
                declarations: [
                  ProfileLayout4Page
               ],
    
                exports: [
                 ProfileLayout4Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-profile-layout-4 [data]="data"></cs-profile-layout-4>
  7. Data you will find in src/app/services/profile-service.ts
  8. Events:
              @Output() onItemClick = new EventEmitter();
              @Output() onLike = new EventEmitter();
              @Output() onComment = new EventEmitter();
    

PROFILE – profile-layout-5

  1. In your project create folder components example src/app/components
  2. Copy component src/app/components/profile/profile-layout-5 from download project to your project (src/app/components)
  3. Create share module src/app/components/shared.module.ts
              import {  ProfileLayout5Page } from './profile/profile-layout-5/profile-layout-5.page';
    
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule
                ],
                declarations: [
                  ProfileLayout5Page
               ],
    
                exports: [
                 ProfileLayout5Page
                ],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
    
              export class SharedModule { }
  4. Generate new page for your component - CLI commands (example: ionic generate page yourPageName)
  5. In your-page-name.module.ts import your share module
              import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
              import { CommonModule } from '@angular/common';s
              import { FormsModule } from '@angular/forms';
              import { IonicModule } from '@ionic/angular';
              import { RouterModule } from '@angular/router';
              import { SharedModule } from './../../components/shared.module';
              import { yourPageName } from './your-page-name.page';
    
              @NgModule({
                imports: [
                  CommonModule,
                  FormsModule,
                  IonicModule,
                  SharedModule,
                  RouterModule.forChild([
                    {
                      path: '',
                      component: yourPageName
                    }
                  ])
                ],
                declarations: [yourPageName],
                exports: [yourPageName],s
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
              })
              export class YourPageNamePageModule { }
  6. Add component to your page your-page-name.html
            <cs-profile-layout-5 [data]="data"></cs-profile-layout-5>
  7. Data you will find in src/app/services/profile-service.ts
  8. Events:
              @Output() onFacebook = new EventEmitter();
              @Output() onTwitter = new EventEmitter();
              @Output() onInstagram = new EventEmitter();
    

ICONS

We have 2 different version icon fontello and Ionicons:

  1. Fontelo Icon
  2. Ionicons

Call fontello icions in HTML

      <i class="icon-bell-off"></i>

Call Ionic icions in HTML

      <ion-icon name="notifications-off-outline"></ion-icon>