Dynamically add html content to page Ionic

Question

I have a component like the one in this picture, and I want to add dynamically html content to the page when the user clicks the add button on the top right. The content that I want to add is a ion-row with some columns which will contain an ion-input which will be editable. Please note that the items that are pre-populated are just text and not ion-input fields. Does anybody know how to add dynamic content to the page?

EDIT: The code of my html component:

      <ion-row style="margin-top:5px;background: #272753">
    <ion-col col-11 style="color:#59597b;padding-left: 10px;font-size: 12px">
      ΤΗΛΕΦΩΝΑ ΕΙΔΟΠΟΙΗΣΗΣ (ΣΕΙΡΑ ΠΡΟΤΕΡΑΙΟΤΗΤΑΣ)
    </ion-col>
    <ion-col col-1>
      <ion-icon float-right name="add" style="color: #ffc200;padding-right: 10px;" (click)="addPhoneNotices()"></ion-icon>
    </ion-col>
  </ion-row>
  <ion-row *ngFor="let phoneNotice of phoneNotices; let i = index;" style="margin-bottom:2px;background: #272753;">
    <ion-col col-1>
      <img src="../assets/imgs/drag-icon.png" style="height:20px;width:20px;">
    </ion-col>
    <ion-col col-5 style="color:#ffffff">
      {{phoneNotice.name}}
    </ion-col>
    <ion-col col-5 style="color:#ffffff">
      {{phoneNotice.phone}}
    </ion-col>
    <ion-col col-1>
      <ion-icon float-right name="close" style="color:#ffffff; margin-right:10px"></ion-icon>
    </ion-col>
  </ion-row>

The code of my ts file:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-new-customer',
  templateUrl: 'new-customer.html',
})
export class NewCustomerPage {

  phoneNotices: Array<{ name: string, phone: string }> = [
    { name: "Ελένη Γεωργίου", phone: "211 45 55 456" },
    { name: "Βαγγέλης Γεωργίου", phone: "687 64 52 354" },
    { name: "Αγγελική Γεωργίου", phone: "687 64 52 354" },
  ];
constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

}

As you can see I use an ngFor loop to show the items. The question now is how to add dynamically a row with ion-input columns. Does anybody know how to add an addPhoneNotice() function which will add to the layout a row with ion-input columns?

Thanks

You can have a look at the *ngFor directive. In your html you will have to define a single ion-row with this directive to access a variable in your .ts file. Just share your code so I can adapt it — saperlipopette
– saperlipopette, Commented Nov 6, 2018 at 9:38

saperlipopette · Accepted Answer · 2018-11-06 10:53:44Z

To add rows you just have to push data to your array.

If you want your existing data to be simple displayed text and your new data to be an input, you will have to add a new property to each phoneNotice to know if this item is set or if this item need to be set/edited

In your .ts file :

// Add a new property to each item of the array, to know if the item has to be displayed as text or needs to be displayed as an input

phoneNotices: Array<{ name: string, phone: string, set: boolean }> = [
    { name: "Ελένη Γεωργίου", phone: "211 45 55 456", set: true },
    { name: "Βαγγέλης Γεωργίου", phone: "687 64 52 354", set: true },
    { name: "Αγγελική Γεωργίου", phone: "687 64 52 354", set: true },
  ];

// Now you set a function to push data to your array when user wants to add something. You can for example list this function to a button
add(){
    // We add an empty element to the array
    this.phoneNotices.push(name: "", phone: "", set: false)
}

// This function will allow you to make a ion-input become a simple text display when users finishes to input the phoneNotice item
validate(index){
    // We set the phoneNotice at given index completed
    this.phoneNotices[index].set = true;
}

Now in your html file :

<ion-row *ngFor="let phoneNotice of phoneNotices; let i = index;" style="margin-bottom:2px;background: #272753;">
    <ion-col col-1>
      <img src="../assets/imgs/drag-icon.png" style="height:20px;width:20px;">
    </ion-col>
    <ion-col col-5 style="color:#ffffff">
      <ion-input *ngIf="!phoneNotice.set" type="text" [(ngModel)]="phoneNotice.name">
      <p *ngIf="phoneNotice.set">{{phoneNotice.name}}</p>
    </ion-col>
    <ion-col col-5 style="color:#ffffff">
      <ion-input *ngIf="!phoneNotice.set" type="tel" [(ngModel)]="phoneNotice.phone">
      <p *ngIf="phoneNotice.set">{{phoneNotice.phone}}</p>
    </ion-col>
    <ion-col col-1 *ngIf="phoneNotice.set">
      <ion-icon float-right name="close" style="color:#ffffff; margin-right:10px"></ion-icon>
    </ion-col>
    <ion-col col-1 *ngIf="!phoneNotice.set">
      <button ion-button (click)="validate(i)">Validate</button>
    </ion-col>
</ion-row>

In the html file, there are *ngIf directives to choose to display a simple text or an input, depending on if the user finished to type the phoneNotice item, but also to show/hide the validate button depending if the item is text or input

Collectives™ on Stack Overflow

Dynamically add html content to page Ionic

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related