Ionic2 add element in view

Question

I need to create a click event that when pressed creates an input in the view. How can I do that? Thank you Ps: ionic2 typescript use

HTML

<ion-navbar *navbar>
  <ion-title>
    POSimplex
  </ion-title>
</ion-navbar>

<ion-content class="home" padding>
  <button ion-button full>Login</button>
  <p>
    <button ion-button full>Criar conta</button>
  </p>
  <p>{{ sl }}</p>
</ion-content>

Typescript

import {Component} from "@angular/core";
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  sl: string
  constructor(private navController: NavController) {this.sl = '<button ion-button full>Criar conta</button>'}
}

Answer 1

Place the click event:

<button ion-button full (click)="inserirCampo()">Adicionar campo</button>

As you may already know, Ionic uses Angularjs, the "infinite" insertion of elements in the DOM (which I usually do), consists of having a div containing a Repeater (ngFor) working on a scope variable.

<div *ngFor="let item of inputs">
    <input type="text">
</div>

With that, in your job inserirCampo you will insert a new item into your scope variable:

this.inputs.push(novoItem);

Having the two way data Binding from Angular, once you enter the scope variable, the input will be displayed on the page.

Typescript:

export class MinhaPagina {
  inputs: Array<{title: string, type: string, value: string}>;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

      this.inputs = [
          { title: "teste", type: "text", value: "valor" },
          { title: "teste2", type: "text", value: "valor2" }
      ];
  }

  adicionarCampo() {
      this.inputs.push({ title: "teste", type: "text", value: "valor" });
  }
}

.html

<ion-content>
    <ion-list>
        <ion-item *ngFor="let item of inputs">
            <ion-label fixed>{{item.title}}</ion-label>
            <ion-input type="{{item.type}}" value="{{item.value}}"></ion-input>
        </ion-item>
    </ion-list>
    <button ion-button class="button" (click)="adicionarCampo()">Adicionar campo</button>
</ion-content>

Note. Your code did not work because you used *ngfor instead of *ngFor