Naturally Produced Modules
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

ngx-dragonfly

1.1.1 • Public • Published

ngx-dragonfly

This librabry is for Angular (2+) projects to build a tabular list from the data fetched through the provided api url

Installing

npm install ngx-dragonfly --save

Implementation

Simply first import the module and service file in your app.module.ts as shown below

import { DragonflyModule } from 'ngx-dragonfly/dragonfly.module';

imports : [DragonflyModule]

Once importing is done, you can either print the list view of data fetched from api url or get the fetched data in you component.ts file

Displaying the tabular list view

app.component.html

    <app-unite-list
            [apiUrl]        = "myApiUrl"
            [dataNode]      = "myDataNode"
            [tableHeader]   = "myTableHeaders"
            tableClass      = "table-hover table"
            methodCall      = "post"
            [dataTotalNode] = "myDataTotalNode"
            [postBodyStr]   = "myPostBodyStr"
            [showPagination] = true
            [postBodyNodeDetails] = "myPostBodyNodeDetails"
        >
    </app-unite-list>

app.component.ts

    import { Component } from '@angular/core';

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    myData;
    myApiUrl;
    myTableHeaders;
    myDataNode;

    constructor(private _dragSer : DragonService){
        this.myApiUrl = "http://demo.appcarvers.com/junite/index.php?option=com_api&app=content&resource=articles&format=raw&lang=en";
        this.myDataNode = ['data', 'data', 'results'];
        this.myTableHeaders =[
                                {label : "Image", identifier : ['images', 'intro_image'], displayType : 'image'},
                                {label : "Title", identifier : ['title']},
                                {label : "Categroy", identifier : ['catid', 'title']}
                            ];
    }

    }

Fetching data in your component.ts file

    import { Component } from '@angular/core';
    import { DragonService } from 'ngx-dragonfly/dragon.service';

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
        providers : [DragonService]
    })
    export class AppComponent {
        title = 'app works!';
        myData;
        myApiUrl;
        myDataNode;
        myServiceData;

        constructor(private _dragSer : DragonService){
            this.myApiUrl = "http://demo.appcarvers.com/junite/index.php?option=com_api&app=content&resource=articles&format=raw&lang=en";
            this.myDataNode = ['data', 'data', 'results'];

            this._dragSer
                        .getData(this.myApiUrl, 'get', this.myDataNode)
                        .subscribe(data => {
                                    this.myServiceData = data;
                                    console.log(this.myServiceData);
                                });
        }

    }

Docs in progress

Keywords

none

install

npm i ngx-dragonfly

Downloadsweekly downloads

0

version

1.1.1

license

ISC

last publish

collaborators

  • avatar