Displaying user given data dynamically in table format when user click on add button every time

Ionic Framework ionic-v3
1

Hi,
Here in the first screen, the user will give some inputs as showing in screen and click on the Done button it leads to display the second screen,
donate
2.

add_donate
add_donate.PNG1360×459 5.85 KB

above in the second screen, you can see Done button changed to Add and below that it displays previously added list. whenever user added data, dynamically data gets bind with the grid as a new record and print the Total amount by summing up with the previous amount. The user can remove any selecting(by checkbox) record, so the checked amount will be subtracted from the total amount. below is another reference image.

add_donate2
add_donate2.PNG1358×398 6.25 KB

all above functionality, I had implemented using JQuery for phonegap app. Now I am trying to implement the same functionality using ionic2.
Can anyone help me to implement at least up to binding user given data to the grid dynamically?
I will be thankful for any response.

2

Hello,

if I understood it correct, then you are new to ionic2+ . In this case look here https://angular.io/guide/displaying-data
In Ionic 2+ angular would do that for you. There are some strutural directives like ngfor, ngif, ngswitch, etc whichs takes care that datas, stored in an iterable variable, are displayed in html. Another resource for that is https://codecraft.tv/courses/angular/built-in-directives/ngfor/

Also there are tutorial from people like https://www.joshmorony.com/ ,see under topics, and others, they make great tutorials for the community.

Best regards, anna-liebt

1 Like
3

Thanks for the response. Actually here user gives some inputs, we need to display those input values in grid view. we are not interacting with any itereated data here. it’s exactly that http://www.syntaxsuccess.com/viewarticle/angular-2.0-input-values-and-binding. I tried this but wasn’t working for me.

4

Hello,

import {Component} from '@angular/core';
import {Contact} from './contact';

@Component({
    selector: 'contact-list',
    template: `
    <div>
    <h1>Contact List</h1>
    <table class="table">
        <thead>
            <tr>
                <td>Name and phone number</td>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let contact of contacts" style="margin-bottom: 10px;">
                <td>{{contact.descr}}</td> <td><button class="btn btn-primary btn-xs" (click)="removeContact(contact)">Delete</button></td>
            </tr>
        </tbody>
    </table>
    <div class="addContactControls">
        <input #name placeholder="name" />
        <input #phone placeholder="phone" />
        <button class="btn btn-primary btn-xs" (click)="addContact(name,phone)">Add Contact</button>
    </div>
    </div>`
})

export class ContactList {
    contacts: Array<Contact> = [];

    addContact(name,phone){
        const contact = new Contact(name.value,phone.value);
        this.contacts.push(contact);
        name.value = '';
        phone.value = '';
    }

    removeContact(contact){
        const index = this.contacts.indexOf(contact);
        this.contacts.splice(index,1);
    }
}

As you see in these example you have an iterateable variable like an array named contacts. On button click a new object contact will added to contacts.

In html the angular directive ngfor iterates over the array an adds for each entry in contacts a ‘tr’ to your html.

Every time you change the array contacts, by deleting or adding or…, anglur will rebuild your html.

So if I understood it correct, then you have code but is not working as expected.

In this case post related code. Maybe a typo or etc…

Best regards, anna-liebt

5

It’s working. Thanx @anna_liebt .

6

Hi Ramsk ,

happen that I need to build something similar .would you mind post your both html and .ts code ? or any github link…

Thanks