Overview

  • +

    Introduction

    Chimera is a multipurpose ionic 3 application

    Diverse design, clean, simple and luxurious.

    Convenient, easy to use, save time. Fully functional, use many cases. Easy to customize.

    Chimera is built from the components of the ionic supply and is tailored to suit our needs. The template consists of four main parts: the component has been customized. The interfaces are designed based on the custom component. Social networking sites provided API. The native of Ionic is used to interact with your device.

    Email: luann4099@gmail.com


    About the available interfaces:

    + 39 Skin Color

    + 3 About

    + 4 Blog

    + 3 Gallery

    + 2 Todo

    + 3 Coundown

    + Chat

    + Shop

    + Music

    + Magazine

    + 3 Side Menu

    + 7 Profiles

    + 7 Login


    Ready complete application:

    + Facebook

    + Instagram

    + Twitter

    + Unsplash

    + Youtube

    + Wordpress


    About app:

    Chimera is rewritten for Ionic's existing elements with classes and adds many designs for you to choose from.


    Chimera is made up of Sass, Angular 4, Ionic 3

Installation

  • +

    Install Ionic

    If you new to Ionic. You can reading here to learn how to install ionic
  • +

    Install Chimera

    After install ionic

    Download source code from envato, extract to somewhere, open terminal and navigate to where you extract code. After that run command:

    npm install

    Once completed, it will look like this


    You are now ready to install and can move to the application launcher on your browser. See instructions for running the application on your browser.

  • +

    Test On Browser

    After install project just run this command:

    ionic serve -l

    And here is the result, the template on your browser.

  • +

    More Peferences

    To learn more and about Ionic, you can visit the following links.

    Ionic Getting started guide

    ionicframework.com/getting-started

    Ionic Documentation

    ionicframework.com/docs

    Ionic Community Forum

    forum.ionicframework.com

    ngCordova Documentation

    http://ngcordova.com/docs

Class in component

  • +

    Variable in Color

    Here are some color variations, you can change them to show your preferences for the entire template.

    Variable Value
    $transparent transparent
    $black #212121
    $white #fff
    $white-1 #fafafa
    $white-2 #f1f1f1
    $grey-1 #ebebeb
    $grey-2 #ddd
    $grey-3 #bebebe
    $grey-4 #757575
    $grey-5 #555
    $red #F44336
    $pink #E91E63
    $purple #9C27B0
    $d-purple #673AB7
    $indigo #3F51B5
    $blue #2196F3
    $l-blue #03A9F4
    $cyan #00BCD4
    $teal #009688
    $green #4CAF50
    $l-green #8BC34A
    $lime #CDDC39
    $yellow #FFEB3B
    $amber #FFC107
    $orange #FF9800
    $d-orange #FF5722
    $brown #795548
    $blue-grey #607D8B
    $coban #11c99f
    $lama #d0eeaa
    $datroi #a1e3e2
    $tim #957eed
    $lanon #cef9c0
    $hong #fcb7be
    $lot #eaf8f8
    $phan #faecfd
    $black-opct rgba(0,0,0,0.3)
    $black-opct-1 rgba(0,0,0,0.6)
    $black-opct-2 rgba(0,0,0,0.9)
    $white-opct rgba(255,255,255,0.3)
    $white-opct-1 rgba(255,255,255,0.6)
    $white-opct-2 rgba(255,255,255,0.9)
  • +

    Background

    You also have some gradient backgrounds with the following classes.


    .black .transparent .white .white-2 .white-2 .grey-1 .grey-2 .grey-3 .grey-4 .grey-5 .red .pink .purple .d-purple .indigo .blue .l-blue .cyan .teal .green .l-green .lime .yellow .amber .orange .d-orange .brown .blue-grey

    You also have some gradient backgrounds with the following classes.


    .pink-vs-indigo .indigo-vs-purple .pink-vs-red .pink-vs-yellow .lama-vs-coban .green-vs-yellow .tim-vs-datroi .hong-vs-lanon .lot-vs-phan
  • +

    Text

    The following are common classes that define text. font-weight classes, font-color classes, text-aligning classes, text-decoration, text-transform, letter-spacing, text-overflow. You can see the list below and how to use the template.

    Class Description
    .text-black Text color
    .text-white Text color
    .text-white-1 Text color
    .text-white-2 Text color
    .text-grey-1 Text color
    .text-grey-2 Text color
    .text-grey-3 Text color
    .text-grey-4 Text color
    .text-grey-5 Text color
    .text-red Text color
    .text-pink Text color
    .text-purple Text color
    .text-d-purple Text color
    .text-indigo Text color
    .text-blue Text color
    .text-l-blue Text color
    .text-cyan Text color
    .text-teal Text color
    .text-green Text color
    .text-l-green Text color
    .text-lime Text color
    .text-yellow Text color
    .text-amber Text color
    .text-orange Text color
    .text-d-orange Text color
    .text-brown Text color
    .text-blue-grey Text color
    .spacing-1 Text color
    .spacing-2 Text color
    .spacing-3 Text color
    .spacing-4 Text color
    .spacing-5 Text color
    .uppercase Text uppercase
    .lowercase Text lowercase
    .capitalize Text capitalize
    .text-left Text left
    .text-center Text center
    .text-right Text right
    .text-ellipsis

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    .overline Text overline
    .line-throught Text line throught
    .underline Text underline
    .fw-100 font weight 100
    .fw-200 font weight 200
    .fw-300 font weight 300
    .fw-400 font weight 400
    .fw-500 font weight 500
    .fw-600 font weight 600
    .fw-700 font weight 700
    .fw-800 font weight 800
    .fw-900 font weight 900
    .fs-5 font size 5px
    .fs-6 font size 6px
    .fs-7 font size 7px
    .fs-8 font size 8px
    .fs-9 font size 9px
    .fs-10 font size 10px
    .fs-11 font size 11px
    .fs-12 font size 12px
    .fs-13 font size 13px
    .fs-14 font size 14px
    .fs-15 font size 15px
    .fs-16 font size 16px
    .fs-17 font size 17px
    .fs-18 font size 18px
    .fs-19 font size 19px
    .fs-20 font size 20px
    .fs-21 font size 21px
    .fs-22 font size 22px
    .fs-23 font size 23px
    .fs-24 font size 24px
    .fs-25 font size 25px
    .fs-26 font size 26px
    .fs-27 font size 27px
    .fs-28 font size 28px
    .fs-29 font size 29px
    .fs-30 font size 30px
    .fs-32 font size 32px
    .fs-34 font size 34px
    .fs-36 font size 36px
    .fs-38 font size 38px
    .fs-40 font size 40px
    .fs-42 size 42px
    .fs-44 size 44px
    .fs-46 size 46px
    .fs-48 size 48px
    .fs-50 size 50px
    .fs-60 size 60px
    .fs-70 size 70px
    .fs-80 size 80px
    .fs-90 size 90px
    .fs-100 size 100px
  • +

    Stroke

    Stroke classes and their uses and combinations with colors.

    Class Description
    .stroke
    .stroke .stroke-1
    .stroke .stroke-2
    .stroke .stroke-3
    .stroke .stroke-left .stroke-3
    .stroke .stroke-right .stroke-3
    .stroke .stroke-bottom .stroke-3
    .stroke .stroke-top .stroke-3
    .divider pink
    .bdra-0 border radius 0px
    .bdra-1 border radius 1px
    .bdra-2 border radius 2px
    .bdra-3 border radius 3px
    .bdra-4 border radius 4px
    .bdra-5 border radius 5px
    .bdra-6 border radius 6px
    .bdra-7 border radius 7px
    .bdra-8 border radius 8px
    .bdra-9 border radius 9px
    .bdra-10 border radius 10px
    .bdra-12 border radius 12px
    .bdra-14 border radius 14px
    .bdra-15 border radius 15px
    .bdra-16 border radius 16px
    .bdra-18 border radius 18px
    .bdra-20 border radius 20px
    .bdra-25 border radius 25px
    .bdra-30 border radius 30px
    .circle
    .stroke .stroke-2 .stroke-red
    .stroke .stroke-2 .stroke-purple
    .stroke .stroke-2 .stroke-blue
    .stroke .stroke-2 .stroke-green
    .stroke .stroke-2 .stroke-orange
    .stroke .stroke-2 .stroke-<...> <...> name color of list variable color
  • +

    Shadow

    Shadow has shadow outer and shadow inner. There are 3 different strengths. You can see the specific explanations below.

    Class Description
    .shadow-0

    boxshadow 0

    .shadow-1

    shadow 1

    .shadow-2

    shadow 2

    .shadow-3

    shadow 3

    .shadow-inset-1

    shadow inset 1

    .shadow-inset-2

    shadow inset 2

    .shadow-inset-3

    shadow inset 3

  • +

    Opacity

    The black and white opacity is composed of three levels. you can see in detail below.

    Class Description
    .black-opct

    black opacity 0.3

    .black-opct-1

    black opacity 0.6

    .black-opct-2

    black opacity 0.9

    .white-opct

    white opacity 0.3

    .white-opct-1

    white opacity 0.6

    .white-opct-2

    white opacity 0.9

    In addition, the classes define the general opacity as follows.

    Class Description
    .opct-0

    opacity 0

    .opct-1

    opacity 0.1

    .opct-2

    opacity 0.2

    .opct-3

    opacity 0.3

    .opct-4

    opacity 0.4

    .opct-5

    opacity 0.5

    .opct-6

    opacity 0.6

    .opct-7

    opacity 0.7

    .opct-8

    opacity 0.8

    .opct-9

    opacity 0.9

    .opct-10

    opacity 1

  • +

    Margin

    Classes define common margin for quick use.

    Class Description
    .mg-0 margin 0px
    .mg-auto margin left auto & margin-right auto
    .mg-5 margin left 5px
    .mg-10 margin left 10px
    .mg-15 margin left 15px
    .mg-20 margin left 20px
    .mg-25 margin left 25px
    .mg-30 margin left 30px
    .mg-35 margin left 35px
    .mg-40 margin left 40px
    .mg-45 margin left 45px
    .mg-50 margin left 50px
    .mg-70 margin left 70px
    .mg-90 margin left 90px


    Below are the classes that define the common margin.

    Margin top (px) Margin right (px) Margin bottom (px) Margin left (px)
    .mgt-0 .mgr-0 .mgb-0 .mgl-0
    .mgt-5 .mgr-5 .mgb-5 .mgl-5
    .mgt-10 .mgr-10 .mgb-10 .mgl-10
    .mgt-15 .mgr-15 .mgb-15 .mgl-15
    .mgt-20 .mgr-20 .mgb-20 .mgl-20
    .mgt-25 .mgr-25 .mgb-25 .mgl-25
    .mgt-30 .mgr-30 .mgb-30 .mgl-30
    .mgt-35 .mgr-35 .mgb-35 .mgl-35
    .mgt-40 .mgr-40 .mgb-40 .mgl-40
    .mgt-45 .mgr-45 .mgb-45 .mgl-45
    .mgt-50 .mgr-50 .mgb-50 .mgl-50
    .mgt-70 .mgr-70 .mgb-70 .mgl-70
    .mgt-90 .mgr-90 .mgb-90 .mgl-90


    In addition, you can subtract the distance by the margin class back to the corresponding side you need.

    Margin top (px) Margin right (px) Margin bottom (px) Margin left (px)
    .mgt--5 .mgr--5 .mgb--5 .mgl--5
    .mgt--10 .mgr--10 .mgb--10 .mgl--10
    .mgt--15 .mgr--15 .mgb--15 .mgl--15
    .mgt--20 .mgr--20 .mgb--20 .mgl--20
    .mgt--25 .mgr--25 .mgb--25 .mgl--25
    .mgt--30 .mgr--30 .mgb--30 .mgl--30
    .mgt--35 .mgr--35 .mgb--35 .mgl--35
    .mgt--40 .mgr--40 .mgb--40 .mgl--40
    .mgt--45 .mgr--45 .mgb--45 .mgl--45
    .mgt--50 .mgr--50 .mgb--50 .mgl--50
    .mgt--70 .mgr--70 .mgb--70 .mgl--70
    .mgt--90 .mgr--90 .mgb--90 .mgl--90
  • +

    Padding

    Here are the common definition padding classes for you to use quickly. You can view the listing and usage below.

    Class Description
    .pd-0 padding 0px
    .pd-1 padding 1px
    .pd-2 padding 2px
    .pd-3 padding 3px
    .pd-4 padding 4px
    .pd-5 padding 5px
    .pd-6 padding 6px
    .pd-7 padding 7px
    .pd-8 padding 8px
    .pd-9 padding 9px
    .pd-10 padding 10px
    .pd-11 padding 11px
    .pd-12 padding 12px
    .pd-13 padding 13px
    .pd-14 padding 14px
    .pd-15 padding 15px
    .pd-16 padding 16px
    .pd-17 padding 17px
    .pd-18 padding 18px
    .pd-19 padding 19px
    .pd-20 padding 20px
    .pd-25 padding 25px
    .pd-30 padding 30px
    .pd-35 padding 35px
    .pd-40 padding 40px
    .pd-45 padding 45px
    .pd-50 padding 50px


    You also have specific classes defining the padding you need.

    padding top (px) padding right (px) padding bottom (px) padding left (px)
    .pdt-0 .pdr-0 .pdb-0 .pdl-0
    .pdt-1 .pdr-1 .pdb-1 .pdl-1
    .pdt-2 .pdr-2 .pdb-2 .pdl-2
    .pdt-3 .pdr-3 .pdb-3 .pdl-3
    .pdt-4 .pdr-4 .pdb-4 .pdl-4
    .pdt-5 .pdr-5 .pdb-5 .pdl-5
    .pdt-6 .pdr-6 .pdb-6 .pdl-6
    .pdt-7 .pdr-7 .pdb-7 .pdl-7
    .pdt-8 .pdr-8 .pdb-8 .pdl-8
    .pdt-9 .pdr-9 .pdb-9 .pdl-9
    .pdt-10 .pdr-10 .pdb-10 .pdl-10
    .pdt-11 .pdr-11 .pdb-11 .pdl-11
    .pdt-12 .pdr-12 .pdb-12 .pdl-12
    .pdt-13 .pdr-13 .pdb-13 .pdl-13
    .pdt-14 .pdr-14 .pdb-14 .pdl-14
    .pdt-15 .pdr-15 .pdb-15 .pdl-15
    .pdt-16 .pdr-16 .pdb-16 .pdl-16
    .pdt-17 .pdr-17 .pdb-17 .pdl-17
    .pdt-18 .pdr-18 .pdb-18 .pdl-18
    .pdt-19 .pdr-19 .pdb-19 .pdl-19
    .pdt-20 .pdr-20 .pdb-20 .pdl-20
    .pdt-25 .pdr-25 .pdb-25 .pdl-25
    .pdt-30 .pdr-30 .pdb-30 .pdl-30
    .pdt-35 .pdr-35 .pdb-35 .pdl-35
    .pdt-40 .pdr-40 .pdb-40 .pdl-40
    .pdt-45 .pdr-45 .pdb-45 .pdl-45
    .pdt-50 .pdr-50 .pdb-50 .pdl-50
  • +

    Skin

    To change the color of the toolbar and the sidebar first you need to use the '.skin' class then associate it with the class '.skin-dark' or the class '.skin-light' so that the highlight on the background and the end Select colors with '.skin-blue' or '.skin-red' ... etc ...

    Add those classes to the tag like < ion-tabs > or < ion-menu > or < ion-toolbar >

    Class
    .skin .skin-dark .skin blue
    .skin .skin-dark .skin-pink-vs-indigo
    .skin .skin-dark .skin-indigo-vs-purple
    .skin .skin-dark .skin-pink-vs-red
    .skin .skin-dark .skin-pink-vs-yellow
    .skin .skin-dark .skin-lama-vs-coban
    .skin .skin-dark .skin-green-vs-yellow
    .skin .skin-dark .skin-tim-vs-datroi
    .skin .skin-dark .skin-hong-vs-lanon
    .skin .skin-light .skin-lot-vs-phan
    .skin .skin-dark .skin-transparent
    .skin .skin-light .skin-transparent
    .skin .skin-light .skin-white
    .skin .skin-light .skin-white-1
    .skin .skin-light .skin-white-2
    .skin .skin-light .skin-grey-1
    .skin .skin-light .skin-grey-2
    .skin .skin-light .skin-grey-3
    .skin .skin-light .skin-grey-4
    .skin .skin-light .skin-grey-5
    .skin .skin-dark .skin-black
    .skin .skin-dark .skin-red
    .skin .skin-dark .skin-pink
    .skin .skin-dark .skin-purple
    .skin .skin-dark .skin-d-purple
    .skin .skin-dark .skin-indigo
    .skin .skin-dark .skin-blue
    .skin .skin-light .skin-l-blue
    .skin .skin-dark .skin-cyan
    .skin .skin-dark .skin-teal
    .skin .skin-dark .skin-green
    .skin .skin-light .skin-l-green
    .skin .skin-light .skin-lime
    .skin .skin-light .skin-yellow
    .skin .skin-light .skin-amber
    .skin .skin-dark .skin-orange
    .skin .skin-dark .skin-d-orange
    .skin .skin-dark .skin-brown
    .skin .skin-dark .skin-blue-grey
  • +

    Other

    There are also other classes that define blocks. See the list below and how to use them

    Class Description
    .pull-left Float left
    .pull-right Float right
    .pst-relative position relative
    .pst-absolute position absolute
    .pst-fixed position fixed
    .block display block
    .inline-block display inline block
    .full-width display block & width 100%

Components

Lazy Loading

All our components and page are design to support lazy loading. To learn about lazy loading just reading here. But you can still use component without lazy loading like normal, just import component to app.module.ts file

  • +

    Login Component

    How to adding login component to your project

    • Login Component V1
      1 - Run command ionic g page your-page-name
      2 - Import Login Component to Your Page Module
      import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { LoginV1Module} from '../../components/login/login-v1/login-v1.module';
      
      @NgModule({
        declarations: [
          YourPage
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          LoginV1Module
        ],
      })
      export class YourPageModule {}
      3 - Create data and events for component
      	 this.data={
             txtHead:'Login',
             txtUserName:'UserName',
             txtPassword:'Password',
             btnLogin:'Login',
             btnSignUp:'Signup',
             imgLogo:'assets/img/chimera_b.png'
           }
      
           this.event={
             onDismiss:function(){
               navCtrl.pop();
             },
             onLogin:function(item){
               that.toastService.presentToast("Value: "+item.username+"-"+item.password);
             },
             onSignUp:function(){
               that.toastService.presentToast("SignUp Clicked");
             }
           }
           
      4 - Put html to where you want show component
            <login-v1 [data]="data" [events]="event">
      	 </login-v1>
      	 
    • Login Component V2
      1 - Run command ionic g page your-page-name
      2 - Import Login Component to Your Page Module
      import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { LoginV2Module} from '../../components/login/login-v2/login-v2.module';
      
      @NgModule({
        declarations: [
          YourPage
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          LoginV2Module
        ],
      })
      export class YourPageModule {}
      3 - Create data and events for component
      	 this.data= {
             txtHead:'Lorem ipsum dolor sit amen',
             txtUserName:'UserName',
             txtPassword:'Password',
             txtOr:'Or',
             btnLogin:'Login',
             btnFacebookLogin:'Login with Facebook',
             btnGoogleLogin:'Login with Google',
             btnSignUp:'Create new Account',
             btnForgotPassword:'Forgot Password ?',
             imgLogo:'assets/img/chimera_w.png',
             imgBg:'assets/img/bg9.jpg' 
           }
      
           this.event={
             onDismiss:function(){
               navCtrl.pop();
             },
             onLogin:function(item){
               that.toastService.presentToast("Value: "+item.username+"-"+item.password);
             },
             onSignUp:function(){
               that.toastService.presentToast("SignUp Clicked");
             },
             onFacebookLogin:function(){
               that.toastService.presentToast("Facebook Login Clicked")
             },
             onGoogleLogin:function(){
               that.toastService.presentToast("Google Login Clicked");
             },
             onForgotPassword:function(){
               that.toastService.presentToast("Forgot Password Clicked");
             }
           }
      
           
      4 - Put html to where you want show component
            <login-v2 [data]="data" [events]="event">
      	 </login-v2>
      	 
    • Login Component V3
      1 - Run command ionic g page your-page-name
      2 - Import Login Component to Your Page Module
      import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { LoginV3Module} from '../../components/login/login-v3/login-v3.module';
      
      @NgModule({
        declarations: [
          YourPage
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          LoginV3Module
        ],
      })
      export class YourPageModule {}
      3 - Create data and events for component
      	 this.data=   {
             txtHead:'Lorem ipsum dolor sit amen',
             txtUserName:'UserName',
             txtPassword:'Password',
             btnLogin:'Login',
             btnForgotPassword:'Forgot Password ?',
             btnSignUp:'Create new Account',
             imgBg:'assets/img/bg16.jpg',
             imgLogo:'assets/img/chimera_w.png'
           }
      
           this.event={
             onDismiss:function(){
               navCtrl.pop();
             },
             onLogin:function(item){
               that.toastService.presentToast("Value: "+item.username+"-"+item.password);
             },
             onSignUp:function(){
               that.toastService.presentToast("SignUp Clicked");
             },
             onFacebookLogin:function(){
               that.toastService.presentToast("Facebook Login Clicked")
             },
             onTwitterLogin:function(){
               that.toastService.presentToast("Twitter Login Clicked");
             },
             onForgotPassword:function(){
               that.toastService.presentToast("Forgot Password Clicked");
             }
           }
      
           
      4 - Put html to where you want show component
            <login-v3 [data]="data" [events]="event">
      	 </login-v3>
      	 
    • Login Component V4
      1 - Run command ionic g page your-page-name
      2 - Import Login Component to Your Page Module
      import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { LoginV4Module} from '../../components/login/login-v4/login-v4.module';
      
      @NgModule({
        declarations: [
          YourPage
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          LoginV4Module
        ],
      })
      export class YourPageModule {}
      3 - Create data and events for component
      	 this.data=  {
             txtHead:'Lorem ipsum dolor sit amen',
             txtUserName:'UserName',
             txtPassword:'Password',
             btnLogin:'Login',
             btnForgotPassword:'Forgot Password ?',
             imgBg:'assets/img/bg16.jpg',
             imgLogo:'assets/img/chimera_b.png'
           }
      
           this.event={
             onDismiss:function(){
               navCtrl.pop();
             },
             onLogin:function(item){
               that.toastService.presentToast("Value: "+item.username+"-"+item.password);
             },
             onSignUp:function(){
               that.toastService.presentToast("SignUp Clicked");
             },
             onForgotPassword:function(){
               that.toastService.presentToast("Forgot Password Clicked");
             }
           }
           
      4 - Put html to where you want show component
            <login-v4 [data]="data" [events]="event">
      	 </login-v4>
      	 
    • Login Component V5
      1 - Run command ionic g page your-page-name
      2 - Import Login Component to Your Page Module
      import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { LoginV5Module} from '../../components/login/login-v5/login-v5.module';
      
      @NgModule({
        declarations: [
          YourPage
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          LoginV5Module
        ],
      })
      export class YourPageModule {}
      3 - Create data and events for component
      	 this.data={
             txtHead:'Lorem ipsum dolor sit amen',
             txtUserName:'UserName',
             txtPassword:'Password',
             btnLogin:'Login',
             btnSignUp:'Create new Account',
             btnForgotPassword:'Forgot Password ?',
             imgBg:'assets/img/bg18.jpg',
             imgLogo:'assets/img/chimera_w.png'
           }
      
           this.event={
             onDismiss:function(){
               navCtrl.pop();
             },
             onLogin:function(item){
               that.toastService.presentToast("Value: "+item.username+"-"+item.password);
             },
             onSignUp:function(){
               that.toastService.presentToast("SignUp Clicked");
             },
             onFacebookLogin:function(){
               that.toastService.presentToast("Facebook Login Clicked")
             },
             onTwitterLogin:function(){
               that.toastService.presentToast("Twitter Login Clicked");
             },
             onForgotPassword:function(){
               that.toastService.presentToast("Forgot Password Clicked");
             }
           }
           
      4 - Put html to where you want show component
            <login-v5 [data]="data" [events]="event">
      	 </login-v5>
      	 
    • Login Component V6
      1 - Run command ionic g page your-page-name
      2 - Import Login Component to Your Page Module
      import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { LoginV6Module} from '../../components/login/login-v6/login-v6.module';
      
      @NgModule({
        declarations: [
          YourPage
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          LoginV6Module
        ],
      })
      export class YourPageModule {}
      3 - Create data and events for component
      	 this.data= {
             txtHead:'Lorem ipsum dolor sit amen',
             txtEmail:'Email',
             txtUserName:'UserName',
             txtPassword:'Password',
             txtConfirmPassword:'Confirm Password',
             btnSegmentLogin:'Login',
             btnSegmentSignUp:'SignUp',
             btnLogin:'Login',
             btnSignUp:'Create new Account',
             btnForgotPassword:'Forgot Password ?',
             imgBg:'assets/img/bg18.jpg',
             imgLogo:'assets/img/chimera_w.png'
           }
      
           this.event={
             onDismiss:function(){
               navCtrl.pop();
             },
             onLogin:function(item){
               that.toastService.presentToast("Value: "+item.email+"-"+item.password);
             },
             onSignUp:function(item){
               that.toastService.presentToast("Value: "+item.signUpEmail+"-"+item.signUpPassword);
             },
             onFacebookLogin:function(){
               that.toastService.presentToast("Facebook Login Clicked")
             },
             onTwitterLogin:function(){
               that.toastService.presentToast("Twitter Login Clicked");
             },
             onForgotPassword:function(){
               that.toastService.presentToast("Forgot Password Clicked");
             },
             onFacebookIconClick:function(){
               that.toastService.presentToast("Facebook Icon Clicked");
             },
             onGoogleIconClick:function(){
               that.toastService.presentToast("Google Icon Clicked");
             },
             onTwitterIconClick:function(){
               that.toastService.presentToast("Twitter Icon Clicked");
             },
             onLinkedInIconClick:function(){
               that.toastService.presentToast("LinkedIn Icon Clicked");
             }
           }
           
      4 - Put html to where you want show component
            <login-v6 [data]="data" [events]="event">
      	 </login-v6>
      	 
    • Login Component V7
      1 - Run command ionic g page your-page-name
      2 - Import Login Component to Your Page Module
      import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { LoginV6Module} from '../../components/login/login-v7/login-v7.module';
      
      @NgModule({
        declarations: [
          YourPage
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          LoginV6Module
        ],
      })
      export class YourPageModule {}
      3 - Create data and events for component
      	 this.data=  {
             txtHead1:'Lorem ipsum dolor sit amen 1',
             txtHead2:'Lorem ipsum dolor sit amen 1',
             txtHead3:'Lorem ipsum dolor sit amen 3',
             txtHead4:'Lorem ipsum dolor sit amen 4',
             txtEmail:'Email',
             txtUserName:'UserName',
             txtPassword:'Password',
             txtConfirmPassword:'Confirm Password',
             btnSegmentLogin:'Login',
             btnSegmentSignUp:'SignUp',
             btnLogin:'Login',
             btnSignUp:'Create new Account',
             btnForgotPassword:'Forgot Password ?',
             imgBg:'assets/img/bg14.jpg',
             imgLogo:'assets/img/chimera_w.png'
           }
           this.event={
             onDismiss:function(){
               navCtrl.pop();
             },
             onLogin:function(item){
               that.toastService.presentToast("Value: "+item.email+"-"+item.password);
             },
             onForgotPassword:function(){
               that.toastService.presentToast("Forgot Password Clicked");
             },
           }
           
      4 - Put html to where you want show component
            <login-v7 [data]="data" [events]="event">
      	 </login-v7>
      	 
  • +

    Register Component

    How to adding register component to your project

    • Register Component V1
      1 - Run command ionic g page your-page-name 2 - Import Register Component to Your Page Module import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { RegisterV1Module} from '../../components/register/register-v1/register-v1.module';
      
      @NgModule({
        declarations: [
          YourPage,
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          RegisterV1Module
        ],
      })
      
      export class RegisterPageModule {}
      
      3 - Create data and event for component
      	this.data= {
              txtHead:'Create New Account',
              btnSignUp:'SignUp',
              imgLogo:'assets/img/chimera_b.png'
            }
      
          this.event={
             onDismiss:function(){
               navCtrl.pop();
             },
             onSignUp:function(item){
               that.toastService.presentToast(JSON.stringify(item));
             }
          }
      
      
      4 - Put html to where you want show component
            <register-v1 [data]="data" [events]="event">
      	 </register-v1>
      	 
    • Register Component V2
      1 - Run command ionic g page your-page-name 2 - Import Register Component to Your Page Module import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { RegisterV2Module} from '../../components/register/register-v2/register-v2.module';
      
      @NgModule({
        declarations: [
          YourPage,
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          RegisterV2Module
        ],
      })
      
      export class YourPageModule {}
      
      3 - Create data and event for component
      	this.data=  {
              txtHead:'Create New Account',
              btnSignUp:'SignUp',
              btnForgotPassword:'Forgot Password',
              txtFullName:'Fullname',
              txtAddress:'Address',
              txtEmail:'Email',
              txtPassword:'Password',
              imgLogo:'assets/img/chimera_b.png'
            }
      
          this.event={
             onDismiss:function(){
               navCtrl.pop();
             },
             onSignUp:function(item){
               that.toastService.presentToast(JSON.stringify(item));
             },
             onForgotPassword:function(){
               that.toastService.presentToast('Forgot password Clicked');
             }
          }
      
      
      4 - Put html to where you want show component
            <register-v2 [data]="data" [events]="event">
      	 </register-v2>
      	 
    • Register Component V3
      1 - Run command ionic g page your-page-name 2 - Import Register Component to Your Page Module import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { RegisterV3Module} from '../../components/register/register-v3/register-v3.module';
      
      @NgModule({
        declarations: [
          YourPage,
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          RegisterV3Module
        ],
      })
      
      export class YourPageModule {}
      
      3 - Create data and event for component
      	this.data=  {
              txtHead:'Create New Account',
              btnSignUp:'SignUp',
              btnForgotPassword:'Forgot Password',
              txtUserName:'UserName',
              txtFullName:'Fullname',
              txtAddress:'Address',
              txtEmail:'Email',
              txtPassword:'Password',
              imgLogo:'assets/img/chimera_w.png',
              imgBg:'assets/img/bg14.jpg'
            }
            
          this.event={
             onDismiss:function(){
               navCtrl.pop();
             },
             onSignUp:function(item){
               that.toastService.presentToast(JSON.stringify(item));
             },
             onForgotPassword:function(){
               that.toastService.presentToast('Forgot password Clicked');
             }
          }
      
      4 - Put html to where you want show component
            <register-v3 [data]="data" [events]="event">
      	 </register-v3>
      	 
  • +

    About Component

    How to adding about component to your project

    • About Component V1
      1 - Run command ionic g page your-page-name 2 - Import Register Component to Your Page Module import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { AboutV1Module } from '../../components/about/about-v1/about-v1.module';
      
      @NgModule({
        declarations: [
          YourPage,
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          AboutV1Module
        ],
      })
      
      export class YourPageModule {}
      
      3 - Create data and event for component
      	  this.data={
               label:{
                 txtContact:'Contact',
                 txtContactUs:'Contact Us',
                 txtAboutUs: 'Contact information',
                 txtPhone:'Phone',
                 txtGetInTouch:'Get In Touch',
                 txtAddress:'Address',
                 txtSendMessage:'Send Message',
                 txtFullName:'Full Name',
                 txtEmail:'Email',
                 txtMessage:'Message',
                 txtSend:'Send',
                 txtSendAMessage:'Send A Message',
                 txtFollow: 'Follow Us',
                 txtFollowWidth: 'Follow Us Width!'
               },
               google_map:'https://www.google.com/maps/embed?pb=!1m23!1m12!1m3!1d27583.016935900032!2d105.83403782350675!3d21.036132526875356!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m8!3e6!4m0!4m5!1s0x0%3A0x85839944f456f253!2zUXXhuqNuZyB0csaw4budbmcgQmEgxJDDrG5o!3m2!1d21.037447999999998!2d105.8360008!5e0!3m2!1svi!2s!4v1496303332325',
               about:'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
               address1:'2b/324 Thuy Khue, Tay Ho, Ha Noi',
               address2:'Hoan Kiem, Ha Noi, Viet Nam',
               phone1:'+84 868120192',
               phone2:'+84 868271095',
               email1:'luann4099@gmail.com',
               email2:'koodinh@gmail.com',
               open_time:'08:00 Am - 11:30 Am',
               close_time:'01:00 Pm - 04:00 Pm',
               txtWorkingTime: 'We work from Monday to Saturday weekly',
               workingTime:'9:00 AM - 4:00 PM'
             };
      
             this.event.onSendMessage=function(item){
               toastService.presentToast("Values: "+item.fullname+"-"+item.email+"-"+item.message);
             }
      
      4 - Put html to where you want show component
            <about-v1 [data]="data" [events]="event">
      	 </about-v1>
      	 
    • About Component V2

      Also implement like about component V1

    • About Component V3

      Also implement like about component V1

  • +

    Profile Component

    How to adding profile component to profile component

    • Profile Component V1
      1 - Run command ionic g page your-page-name
      2 - Import Profile Component to Your Page Module import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { ProfileV1Module } from '../../components/about/profile-v1/profile-v1.module';
      
      @NgModule({
        declarations: [
          YourPage,
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          ProfileV1Module
        ],
      })
      
      export class YourPageModule {}
      
      3 - Create data and event for component
      	  this.data={
            label:{
              txtLikes: 'Likes',
              txtFollower:'Follower',
              txtFollowing:'Following',
              txtPosted:'Posted',
              txtSocial:'Social',
              txtAboutMe:'About Me',
              txtContactMe:'Contact Me',
              btnFollow:'Follow',
              btnAddFriend:'Add Friend'
            },
            user:{
              imgAvatar:'assets/img/avt1.jpg',
              username:'Lrandom',
              job:'Developer',
              followerCount:'193',
              followingCount:'237',
              postCount:'1200',
              aboutMe:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa ante, sollicitudin sit amet ante et, suscipit ultrices justo. Duis tellus neque, lacinia non aliquam eget, aliquet sed neque. Etiam a dolor ligula.',
              address:'Ha Long',
              mail:'luann4099@gmail.com',
              phone:'0868120192'
            },
            photos:[
                {
                   path:'assets/img/bg1.jpg'
                },
                {
                   path:'assets/img/bg2.jpg'
                },
                {
                   path:'assets/img/bg3.jpg'
                },
                {
                   path:'assets/img/bg4.jpg'
                },
                {
                   path:'assets/img/bg5.jpg'
                }
            ]
          }
      
             this.event={
              onFacebookIconClick:function(){
                  that.toastService.presentToast('facebook icon clicked');
              },
              onTwitterIconClick:function(){
                  that.toastService.presentToast('twitter icon clicked');
              },
              onDribbleIconClick:function(){
                  that.toastService.presentToast('dribble icon clicked');
              },
              onLinkedInIconClick:function(){
                  that.toastService.presentToast('linkedin icon clicked');
              },
              onInstagramIconClick:function(){
                  that.toastService.presentToast('instagram icon cliked');
              },
              onPinterestIconClick:function(){
                  that.toastService.presentToast('pinterest icon clicked');
              },
              onGoogleIconClick:function(){
                  that.toastService.presentToast('google icon clicked');
              },
              onFollowClick:function(){
                  that.toastService.presentToast('button follow clicked');
              },
              onAddFriendClick:function(){
                  that.toastService.presentToast('button add friend clicked');
              }
          }
      
      4 - Put html to where you want show component
            <profile-v1 [data]="data" [events]="event">
      	 </profile-v1>
      	 
    • Profile Component V2
      1 - Run command ionic g page your-page-name
      2 - Import Profile Component to Your Page Module import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { ProfileV2Module } from '../../components/about/profile-v2/profile-v2.module';
      
      @NgModule({
        declarations: [
          YourPage,
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          ProfileV2Module
        ],
      })
      
      export class YourPageModule {}
      
      3 - Create data and event for component
      	  this.data={
            label:{
              txtFollower:'Follower',
              txtFollowing:'Following',
              txtPosted:'Posted',
              txtPhotos:'Photos',
              txtAboutMe:'About Me',
              btnFollow:'Follow',
              btnAddFriend:'Add Friend'
            },
            user:{
              imgAvatar:'assets/img/avt5.jpg',
              imgCover:'assets/img/bg15.jpg',
              username:'Lrandom',
              job:'Developer',
              followerCount:'193',
              followingCount:'237',
              photosCount:'1200',
              aboutMe:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa ante, sollicitudin sit amet ante et, suscipit ultrices justo. Duis tellus neque, lacinia non aliquam eget, aliquet sed neque. Etiam a dolor ligula.'
            },
            photos:[
                {
                   path:'assets/img/bg1.jpg'
                },
                {
                   path:'assets/img/bg2.jpg'
                },
                {
                   path:'assets/img/bg3.jpg'
                },
                {
                   path:'assets/img/bg4.jpg'
                },
                {
                   path:'assets/img/bg5.jpg'
                }
            ]
          }
      
             this.event={
              onFacebookIconClick:function(){
                  that.toastService.presentToast('facebook icon clicked');
              },
              onTwitterIconClick:function(){
                  that.toastService.presentToast('twitter icon clicked');
              },
              onDribbleIconClick:function(){
                  that.toastService.presentToast('dribble icon clicked');
              },
              onLinkedInIconClick:function(){
                  that.toastService.presentToast('linkedin icon clicked');
              },
              onInstagramIconClick:function(){
                  that.toastService.presentToast('instagram icon cliked');
              },
              onPinterestIconClick:function(){
                  that.toastService.presentToast('pinterest icon clicked');
              },
              onGoogleIconClick:function(){
                  that.toastService.presentToast('google icon clicked');
              },
              onFollowClick:function(){
                  that.toastService.presentToast('button follow clicked');
              },
              onAddFriendClick:function(){
                  that.toastService.presentToast('button add friend clicked');
              }
          }
      
      4 - Put html to where you want show component
            <profile-v2 [data]="data" [events]="event">
      	 </profile-v2>
      	 
    • Profile Component V3
      1 - Run command ionic g page your-page-name
      2 - Import Profile Component to Your Page Module import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { ProfileV3Module } from '../../components/about/profile-v3/profile-v3.module';
      
      @NgModule({
        declarations: [
          YourPage,
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          ProfileV3Module
        ],
      })
      
      export class YourPageModule {}
      
      3 - Create data and event for component
      	  this.data={
            label:{
              txtFollower:'Follower',
              txtFollowing:'Following',
              txtLikes:'Likes',
              txtPhotos:'Photos',
              txtApps:'Apps',
              txtWebs:'Webs',
              txtVideos:'Videos',
              btnFollow:'Follow',
              btnMessage:'Send Message'
            },
            user:{
              imgAvatar:'assets/img/avt5.jpg',
              imgCover:'assets/img/bg15.jpg',
              username:'Lrandom',
              job:'Developer',
              quote:'It is great day',
              followerCount:'193',
              followingCount:'237',
              likeCount:'2040'
            },
            photos:[
                {
                   path:'assets/img/bg1.jpg'
                },
                {
                   path:'assets/img/bg2.jpg'
                },
                {
                   path:'assets/img/bg3.jpg'
                },
                {
                   path:'assets/img/bg4.jpg'
                },
                {
                   path:'assets/img/bg5.jpg'
                }
            ],
                 videos:[
                {
                   path:'assets/img/bg1.jpg'
                },
                {
                   path:'assets/img/bg2.jpg'
                },
                {
                   path:'assets/img/bg3.jpg'
                },
                {
                   path:'assets/img/bg4.jpg'
                },
                {
                   path:'assets/img/bg5.jpg'
                },
                  {
                   path:'assets/img/bg6.jpg'
                },
                  {
                   path:'assets/img/bg7.jpg'
                }
            ],
                  apps:[
                {
                   path:'assets/img/bg1.jpg'
                },
                {
                   path:'assets/img/bg2.jpg'
                },
                {
                   path:'assets/img/bg3.jpg'
                },
                {
                   path:'assets/img/bg4.jpg'
                },
                {
                   path:'assets/img/bg5.jpg'
                }
            ],
                  webs:[
                {
                   path:'assets/img/bg1.jpg'
                },
                {
                   path:'assets/img/bg2.jpg'
                },
                {
                   path:'assets/img/bg3.jpg'
                },
                {
                   path:'assets/img/bg4.jpg'
                },
                {
                   path:'assets/img/bg5.jpg'
                }
            ]
          }
      
             this.event={
              onFollowClick:function(){
                  that.toastService.presentToast('button follow clicked');
              },
              onSendMessageClick:function(){
                  that.toastService.presentToast('button send message clicked');
              }
          }
      
      
      
      4 - Put html to where you want show component
            <profile-v3 [data]="data" [events]="event">
      	 </profile-v3>
      	 
    • Profile Component V4
      1 - Run command ionic g page your-page-name
      2 - Import Profile Component to Your Page Module import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { ProfileV4Module } from '../../components/about/profile-v4/profile-v4.module';
      
      @NgModule({
        declarations: [
          YourPage,
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          ProfileV4Module
        ],
      })
      
      export class YourPageModule {}
      
      3 - Create data and event for component
      	  this.data={
            label:{
              txtLikes:'Likes',
              txtFollower:'Follower',
              txtFollowing:'Following',
              txtPins:'Pins',
              txtPosted:'Posted',
              btnFollow:'Follow',
              btnMessage:'Send An Message'
            },
            user:{
              imgAvatar:'assets/img/avt5.jpg',
              imgCover:'assets/img/bg15.jpg',
              likeCount:'371',
              username:'Lrandom',
              followerCount:'193',
              followingCount:'237',
              address:'Ha Long',
              quote: 'I have a great day'
            },
              photos:[
                {
                   path:'assets/img/bg1.jpg'
                },
                {
                   path:'assets/img/bg2.jpg'
                },
                {
                   path:'assets/img/bg3.jpg'
                },
                {
                   path:'assets/img/bg4.jpg'
                },
                {
                   path:'assets/img/bg5.jpg'
                }
            ],
              pins:[
                {
                   path:'assets/img/bg1.jpg'
                },
                {
                   path:'assets/img/bg2.jpg'
                },
                {
                   path:'assets/img/bg3.jpg'
                },
                {
                   path:'assets/img/bg4.jpg'
                },
                {
                   path:'assets/img/bg5.jpg'
                },
                {
                   path:'assets/img/bg6.jpg'
                }
            ]
          }
      
             this.event={
              onFacebookIconClick:function(){
                  that.toastService.presentToast('facebook icon clicked');
              },
              onTwitterIconClick:function(){
                  that.toastService.presentToast('twitter icon clicked');
              },
              onInstagramIconClick:function(){
                  that.toastService.presentToast('instagram icon cliked');
              },
              onFollowClick:function(){
                  that.toastService.presentToast('button follow clicked');
              },
              onSendMessageClick:function(){
                  that.toastService.presentToast('button send message clicked');
              }
          }
      
      
      
      4 - Put html to where you want show component
            <profile-v4 [data]="data" [events]="event">
      	 </profile-v4>
      	 
    • Profile Component V5
      1 - Run command ionic g page your-page-name
      2 - Import Profile Component to Your Page Module import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { ProfileV5Module } from '../../components/about/profile-v5/profile-v5.module';
      
      @NgModule({
        declarations: [
          YourPage,
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          ProfileV5Module
        ],
      })
      
      export class YourPageModule {}
      
      3 - Create data and event for component
      	  this.data={
            label:{
              txtLikes:'Likes',
              txtFollower:'Follower',
              txtFollowing:'Following',
              txtMyCollection:'My Collection',
              txtItems:'items'
            },
            user:{
              imgAvatar:'assets/img/avt5.jpg',
              imgCover:'assets/img/bg15.jpg',
              likeCount:'371',
              username:'Lrandom',
              job:'Developer',
              followerCount:'193',
              followingCount:'237'
            },
            collections:[
                {
                    path:'assets/img/bg1.jpg',
                    itemsCount:'1k',
                    name:'Landscape Pics'
                },
                {
                    path:'assets/img/bg2.jpg',
                    itemsCount:'1.5k',
                    name:'Landscape Pics'
                },
                {
                    path:'assets/img/bg3.jpg',
                    itemsCount:'1.9k',
                    name:'Landscape Pics'
                },
                {
                    path:'assets/img/bg4.jpg',
                    itemsCount:'2k',
                    name:'Landscape Pics'
                },
                {
                    path:'assets/img/bg5.jpg',
                    itemsCount:'4k',
                    name:'Landscape Pics'
                }
            ]
          }
      
          this.event={
      
          }
      
      
      
      4 - Put html to where you want show component
            <profile-v5 [data]="data" [events]="event">
      	 </profile-v5>
      	 
    • Profile Component V6
      1 - Run command ionic g page your-page-name
      2 - Import Profile Component to Your Page Module import { NgModule } from '@angular/core';
      import { IonicPageModule } from 'ionic-angular';
      import { YourPage } from './yourpage';
      import { ProfileV6Module } from '../../components/about/profile-v6/profile-v6.module';
      
      @NgModule({
        declarations: [
          YourPage,
        ],
        imports: [
          IonicPageModule.forChild(YourPage),
          ProfileV6Module
        ],
      })
      
      export class YourPageModule {}
      
      3 - Create data and event for component
      	  this.data={
            label:{
              txtPosted:'Posted',
              txtPins:'Pins',
              txtFollower:'Follower',
              txtFollowing:'Following'
            },
            user:{
              imgAvatar:'assets/img/avt3.jpg',
              likeCount:'371',
              username:'Lrandom',
              followerCount:'193',
              followingCount:'237',
              pinCount:'2.4k',
              postCount:'1200',
              address:'Ha Long'
            }
          }
      
          this.event={
              onSettingClick:function(){
                  that.toastService.presentToast('button setting clicked');
              },
              onSendMessageClick:function(){
                  that.toastService.presentToast('button send message clicked');
              }
          }
      
      
      
      4 - Put html to where you want show component
            <profile-v6 [data]="data" [events]="event">
      	 </profile-v6>
      	 
  • +

    ComingSoon Component

    Content updating

  • +

    Blog Component

    Content updating

  • +

    Skins

    Content updating

  • +

    Other Component

    Content updating

Support