Ionic 2/angular 2 - How do I add HTML elements with Typescript to my component?

Question

Please don't dislike judging by the title, read the post first.

I've just started out learning typescript and angular 2 working with the ionic 2 framework.

I'm adding the html element referencing the typscript variable "newItem", like this:

<ion-content>
  <ion-list inset>
    <ion-item *ngFor="let item of todos" (click)="edit(item)">
      {{item}}
    </ion-item>
    <ion-item>test</ion-item>
    <div [innerHTML]=newItem></div>
  </ion-list>
</ion-content>

In my typescript class for the component I have a function addTodo(), which sets the HTML for "newItem" when the pluss/add icon in the right corner is pressed:

  addTodo(){
    this.newItem = "<ion-item>test</ion-item>";
  }

For some reason the "ion-item" tag is ignored on compilation and it only inserts "test" to the div element.

The appliction will look like this:

Component class:

So I tried to add this to the view:

<form *ngIf="editedItem">
  <ion-item><input [(ngModel)]="newItem" name="newItem">
    <ion-buttons end>
      <button ion-button color="danger" (click)="btnCancel()">Cancel</button>
      <button ion-button color="secondary" (click)="btnAdd()">Add</button>
    </ion-buttons>
  </ion-item>
</form>

But now when I click cancel or add, the page needs to reload. I know I'm doing something wrong with the [(ngModel)]="newItem", should I try to pass the Angular variable over to the model or is there a better way to do this.

edit: Passed the variable over to the (click) function, as seen in @JoeriShoeby 's answer below.

In the model:

export class TodosPage {

newItem = "";
todos: string[] = this.getTodos();
editedItem: boolean = false;

  constructor(public navCtrl: NavController) {

  }

  addTodo(){
    this.editedItem = true;
  }

  btnAdd(){
    this.todos.push(this.newItem);
    this.editedItem = false;
  }

  btnCancel(){
    this.editedItem = false;
  }

  getTodos(): string[]{

    return ["item 1", "item 2"];
  }
}

Can you provide me your component class ? You actually need to push a new item object into the 'todos' array. Not html — JoeriShoeby
– JoeriShoeby, Commented Oct 3, 2016 at 18:20
I've added the component class to the post. I thought I might just update the array, but I want the new item to take input, and have buttons for saving and canceling. I thought maybe I could make a new component for the addTodo() content. But I can't figure out how to dynamically add a component with a function. — Kevin Frostad
– Kevin Frostad, Commented Oct 3, 2016 at 18:32
Give me an hour, then I have a computer to code it for you to explain — JoeriShoeby
– JoeriShoeby, Commented Oct 3, 2016 at 18:43
You're not using angular how it's supposed to be used. In ANgular, the point of truth is the model, not the view. You modify the view by modifying the model. Based on the new model, the view refreshes itself and shows the new state of the model. To add a new item, add a new element to the todos array. The view will then refresh: ngFor will notice there is a new element, and will add a new item to the page. — JB Nizet
– JB Nizet, Commented Oct 3, 2016 at 19:34

JoeriShoeby · Accepted Answer · 2016-10-03 21:03:57Z

4

Your HTML file

// Your plus-icon in your header bar
<button (click)='toggleNew == true'>
    <ion-icon name='plus'></ion-icon>
</button>

// Your content
<ion-content>

  <ion-list inset>
    <ion-item *ngFor="let item of todos" (click)="edit(item)">
      {{item}}
    </ion-item>
  </ion-list>

    <ion-item *ngIf='toggleNew'>
        <ion-input [(ngModel)]='newItem' placeholder="Task .. "></ion-input>
        <button (click)='saveNew(newItem)'>Save</button>
        <button danger (click)='cancelNew()'>Cancel</button>
    </ion-item>
</ion-content>

Your component

// Initalial values.
newItem: string = "";
toggleNew: boolean = false;

// Saving function
saveNew( newItem: string ): void {
    this.todos.push(newItem);
    this.toggleNew = false;
    this.newItem = "";
}

// Cancel function
cancelNew(): void {
    this.toggleNew = false;
    this.newItem = "";
}

answered Oct 3, 2016 at 21:03

JoeriShoeby

1,37410 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Kevin Frostad Over a year ago

That worked like a charm, and looked good too. Except now the buttons won't show up. Did you got them showing? I tried with the <ion-buttons end> tags and without.

JoeriShoeby Over a year ago

Create a button within a <ion buttons-end> tag, and within that button the corresponding icon/text

Kevin Frostad Over a year ago

<ion buttons-end> gives me an error and the page won't load. Maybe this is something of ionic 1 and not 2? Console output: Unhandled Promise rejection: Template parse errors: 'ion' is not a known element:

Kevin Frostad Over a year ago

I can get them to show anywhere else but inside the ion-item when there's also an ion-input.

JoeriShoeby Over a year ago

You'll need to use a <ion-buttons end>.

|

Collectives™ on Stack Overflow

Ionic 2/angular 2 - How do I add HTML elements with Typescript to my component?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related