ng-ionix v1.0.13

Ionix

Experimental library for Ionic Framework helps you build an app without Typescript, only HTML/CSS.

Built on top of ng-interactions.

Setup

1. install via npm:

npm i ng-ionix@latest --save

2. Import IoxModule in you module

import { IoxModule } from "ng-ionix";

@NgModule({
    imports: [
        IoxModule,
        ....
    ]
})
export class AppModule { }

Http

iox-apis

api is a component that make and call an HTTP request.

<iox-apis>
    <api #getPage
        url="/pages/about"
        [anonymous]="true"
        [executingMessage]="'LOADING_MSG' | translate"
        dataPath="data.page.content">
    </api>
</iox-apis>

api Properties:

action

action is a custom action built on top of ActionBase from ng-interactions.

You can pass the name of action as a string or an api object.

When action is attached to ion-content, will be executed after the element is loaded. otherwise it will be executed on click event.

1. api action:

Use [action] to call and execute api, and when it is bound to ion-content that has ion-refresher or/and ion-infinite-scroll, it will implement ionRefresh and ionInfinite events. Example:

<iox-apis>
    <api #loadProducts url="/products"
        [executingMessage]="'LOADING_MSG' | translate"
        [hasNextPage]="loadProducts?.response?.data?.next_page_url"
        dataPath="data.products">
    </api>
</iox-apis>

<ion-content [action]="loadProducts">
    <!-- no need to implement (ionRefresh) event, [action] takes care of it. -->
    <ion-refresher>
        <ion-refresher-content pullingText="" refreshingText="">
        </ion-refresher-content>
    </ion-refresher>

    <ion-list>
        <ion-item *ngFor="let item of loadProducts?.data">
            ...

            <event-trigger on="click">
                <action [action]="'pushView'" [actionParams]="['ProductDetailPage', { productId: item.id }]"></action>
            </event-trigger>
        </ion-item>
    </ion-list>

    <!-- no need to implement (ionInfinite) event, [action] takes care of it. -->
    <ion-infinite-scroll>
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

[actionParams] for api:

You can pass query parameters to api using [actionParams] in two ways: 1. an array of values: 'category_1', 4, so will be applied to api query variables in order. 2. an object with keys that match variables in api url: { cat: 'category_1', id: 4 }.

```html
<api url="/{cat}/products/{id}">
<!-- the result will be the same for both ways, so final url will be: '/category_1/product/4'. -->
<api>
```

2. 'pushView':

<button [action]="'pushView'" [actionParams]="['SomePage', { product: item }]">Push</action>

3. 'popView':

<button [action]="'popView'"></button>

4. 'setRootView':

<button [action]="'setRootView'" [actionParams]="['SomePage']">Set Root</button>

5. 'closeView':

<button>
    <event-trigger on="click">
        <action [action]="'closeView'"></action>
    </event-trigger>
    Cancel
</button>
<!-- Or -->
<button [action]="'closeView'" [actionParams]="[{ selectedItem: item }]">Ok</button>

6. 'showModal':

<button [action]="'showModal'" [actionParams]="['ModalPage', { params... }]">Show Modal</button>

7. 'showToast':

<button [action]="'showToast'" [actionParams]="[{ message: 'toast message...', duration: 3000 }]">Show Toast</button>

8. 'submitForm' (see Forms):

<button [action]="'submitForm'">Show Toast</button>

Http Settings:

import { IoxHttpOptions } from "ng-ionix";
...
    constructor(httpOptions: IoxHttpOptions) {
        httpOptions.domain = 'https://www.mydomain.com';
        httpOptions.apiBasePath = '/api/v1';
    }

Http Authorization:

import { IoxAuthService } from "ng-ionix";
...
    constructor(authService: IoxAuthService) {
        authService.authorizationHeader = 'Bearer';
        authService.accessToken = 'user access token should be stored here';
        authService.authenticateAsync = (): Observable<boolean> => {
            return new Observable(observer => {
                // check if user is authenticated or not, refresh the token if expired.
                observer.next(true);
            });
        };
    }

Intercept Http Request:

import { HttpRequest } from "@angular/common/http";
...
    constructor(httpService: IoxHttpService) {
        httpService.iterceptRequest = (httpRequest: HttpRequest<any>) => {
            // change the request...
            return true; // true to allow the execution
        };
    }

Add Custom Action:

import { IAction } from "ng-ionix";

export class MyCustomAction implements IAction {
    name: string = 'customPushView';

    constructor(private app: App) {
    }

    execute(params: any): Observable<any> {
        return Observable.fromPromise(this.app.getActiveNavs()[0].push.apply(this.app.getActiveNavs()[0], params));
    }
}

// in App or AppModule
import { IAction, ActionsProvider } from "ng-ionix";
...
    constructor(actionsProvider: ActionsProvider, myAction: MyCustomAction) {
        actionsProvider.add(myAction);
    }

Forms

iox-form takes care of building FormGroup, and calling api.

iox-form Properties:

<iox-form #form [submitAction]="addProfileApi" [submitParams]="[true, '!noupdate', { id: 10 }]">
    <button [action]="'submitForm'">Save</button>
</iox-form>

field-def Properties:

validations

validations component helps you to display validation errors for a control/field.

Form example:

<iox-form #form [submitAction]="updateProfileApi" [submitParams]="[true, '!noupdate', { id: 10 }]">
    <field-def name="id" tag="noupdate" />
    <field-def name="email" [required]="true"  />
    <field-def name="firstName" [required]="true" />
    <field-def name="lastName" [required]="true" />

    <ion-list *ngIf="form?.formGroup" [formGroup]="form.formGroup">
        ...
        <ion-item>
            <ion-label floating>{{ 'email' | translate }}</ion-label>
            <ion-input type="email" formControlName="email"></ion-input>
        </ion-item>
        <validations [control]="'email'"></validations>
        ...
    </ion-list>

    <!-- when you click the button will submit the form, make an object with all changed fields (first param: true) that have no 'noupdate' in tag property (second param: '!noupdate'), then will call updateProfileApi with query parameter (id: 10) -->
    <button [action]="'submitForm'">Save</button>
</iox-form>

Dialogs

1. confirm

<iox-confirm #confirm okText="Ok" cancelText="Cancel" [message]="msg | translate" [title]="title | translate" (cancelled)="..." (confirmed)="..."></iox-confirm>
<button (click)="confirm.present()">
    Show Confirm
</button>

2. loading

<iox-loading #loading [message]="msg | translate" [duration]="2000"></iox-loading>
<button (click)="loading.present()">
    Show Loading
</button>

3. toast

<iox-toast #toast [message]="msg | translate" [duration]="2000"></iox-toast>
<button (click)="toast.present()">
    Show Toast
</button>

Also you can use showOn preporty on toast, loading or confirm to show it when the value is true.

<iox-toast #toast [message]="msg | translate" [duration]="2000" [showOn]="value.length > 10"></iox-toast>

Variables

View Parameters

Use iox-view-params to read parameters passed to current page.

<iox-apis>
    <api #getProductDetailApi
        url="/product/{id}"
        [executingMessage]="'LOADING_MSG' | translate"
        dataPath="data.product">
    </api>
</iox-apis>

<iox-view-params #viewParams></iox-view-params>

<ion-content [action]="getProductDetailApi" [actionParams]="[viewParams?.get('productId')]">
</ion-content>

Storage

Enable you to access LocalStorage.

<iox-storage #storage></iox-storage>
<div>{{ storage?.get('some-key') }}</div>
<button (click)="storage.set('key', value)">
    Save
</button>

Global Variables

Access global variables across all the pages.

<iox-global-vars #vars></iox-global-vars>
<div>{{ vars?.get('some-key') }}</div>

Local Variables

Temporary variables inside the page.

<iox-local-vars #vars></iox-local-vars>
<div>{{ vars?.get('some-key') }}</div>
<button (click)="vars.set('key', value)">
    Save
</button>