07. UI Component Framework

UI Component Framework

Narik strategy in UI is that your application should be completely independent of which UI Library you use. So Narik provides a UI Framework and also wrappers for all famous Angular UI framework. This cause that you create your templates independent of which UI framework you use, You have standard attributes for all UI framework and creating UI is more easily.

Narik currently provides wrappers for this UI frameworks:

1. Angular Material (narik-ui-material)
2. Devextreme Angular (narik-ui-devextreme)
3. Ng Bootstrap(narik-ui-ng-bootstrap)
4. PrimeNG(narik-ui-primeng)
5. Nebular(narik-ui-nebular)
6. Ngx Bootstrap (narik-ui-ngx-bootstrap)(Under Development)

You create your templates independently of which UI framework you want to use and after that, you can easily change the UI framework.

Let's take a look to an example:

you create your template like this:

    <narik-select [dataKey]='"Staff"' label='{{"staff" | translate}}' [options]="{}" [(ngModel)]='currentEntity.staffId'
            name='staff'>
    </narik-select>
    <narik-select *ngIf="currentEntity.staffId" [dataKey]="'Team'" [dataUrlMethod]="'GetByStaffId'" [options]="{}"
        [dataParameters]="{staffId:currentEntity.staffId}" label="{{'team' | translate}}" [(ngModel)]="currentEntity.teamId"
        name="team">
    </narik-select>
    <narik-select [dataSource]='adsTypes' label='{{"adsType" | translate}}' [(ngModel)]='currentEntity.adsType'
        name='adsType' required>
    </narik-select>
    <narik-input *ngIf="currentEntity.adsType===3" label='{{"adsText" | translate}}' [(ngModel)]='currentEntity.adsText'
        type="textArea" name='adsText'>
    </narik-input>

It dose's matter which wrapper you are using in your application. Your template works correctly.

All base classes for ui components are in @narik/ui-core and for creating a UI component, each wrapper must inherit from the suitable base class and extends it, if it's necessary. Also, all components have two selectors, one is Unique for every component in all wrappers and one is specific. If you want your template be reusable in different wrappers, you should use Unique selectors in your template.

Angular Material Input Wrapper

    import { NARIK_INPUT_INPUTS } from "@narik/ui-core";

    import { Component, forwardRef, Injector, Input } from "@angular/core";
    import { NG_VALUE_ACCESSOR } from "@angular/forms";

    import { NARIK_MAT_FORM_INPUTS } from "../base/narik-mat-form-field";
    import { NarikMatInputBase } from "../base/narik-mat-input-base";

    @Component({
    selector: "narik-mat-input , narik-input",
    templateUrl: "narik-mat-input.component.html",
    inputs: [...NARIK_MAT_FORM_INPUTS, ...NARIK_INPUT_INPUTS],
    providers: [
        {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => NarikMatInput),
        multi: true
        }
    ]
    })
    export class NarikMatInput extends NarikMatInputBase {
        @Input()
        inputCssClass: string;
        constructor(injector: Injector) {
            super(injector);
        }
    }

Angular Devextreme Input Wrapper

    import { NARIK_INPUT_INPUTS, NarikInput } from "@narik/ui-core";

    import { Component, forwardRef, Injector, HostBinding } from "@angular/core";
    import { NG_VALUE_ACCESSOR } from "@angular/forms";

    @Component({
    selector: "narik-dev-input , narik-input",
    templateUrl: "narik-dev-input.component.html",
    inputs: [...NARIK_INPUT_INPUTS],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => NarikDevInput),
            multi: true
        }
    ]
    })
    export class NarikDevInput extends NarikInput {
        constructor(injector: Injector) {
            super(injector);
        }

        @HostBinding("class")
        class = "dx-field display-block";
    }

As you see all wrappers for Narik input have narik-input as a selector. Also, they have a specific selector for sometimes that it's necessary( when an application imports two wrappers)

Narik UI Components
Narik UI Wrappers

You can see more complete examples in these Narik samples and starters

narik-material-starter
narik-material-demo
narik-devextreme-demo
narik-devextreme-starter
narik-ng-bootstrap-demo
narik-primeng-demo
narik-nebular-demo