How can I replace a link with an input after click in Angular 4

Question

I have a array of items and each item will display a link. If any button is clicked, I would like to replace it with an input text box.

*** Template ***
<ng-container *ngFor="let item of items">
  <p>
    <button id="item-{{ item.id }} " (click)="showInput($event, item.id)"></button>
  </p>
</ng-container>


  *** Component ***
  showInput(ev: MouseEvent, id:number){
    ev.stopPropagation();
    let inputHtml = `<input type=\'text\' id=\'${id}\'/>`;
    console.log(ev.srcElement);
    // Replace element with input
    console.log(id);
  }

Vivek Doshi · Accepted Answer · 2018-03-05 13:09:38Z

1

There is no need of function or extra efforts for this , you can simply do it this way :

<ng-container *ngFor="let item of items">
  <p>
    <button *ngIf='!item.inputshow' id="item-{{ item.id }} " (click)="item.inputshow = !item.inputshow"> Button {{ item.id }} </button>
    <input *ngIf='item.inputshow' type='text' id='{{item.id}}' />
  </p>
</ng-container>

WORKING DEMO

*ngIf='!item.inputshow' 
// first it will check for inputshow (First time it will be undefined)
(click)="item.inputshow = !item.inputshow"
// but as soon as user clicks on it it will initialised as boolean true

edited Mar 5, 2018 at 13:09

answered Mar 5, 2018 at 5:00

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

5 Comments

Vivek Doshi Over a year ago

Please let me know the reason behind downvotes , downvoters .

swetansh kumar Over a year ago

I think the downvotes are due to the answer provide by @boris is almost same as yours and the user has written his issue on the comment also. So I think that you should update your answer for the same. Don't you?

Vivek Doshi Over a year ago

@swetanshkumar , Updated thanks , Still that's not the reason being downvoted.

swetansh kumar Over a year ago

I too faced the issue but still not able to find the solution and this is why I was going through each answer.

Vivek Doshi Over a year ago

@swetanshkumar , please create a demo on stackblitz , and genrate issue , So I can check overthere.

Boris Lobanov · Accepted Answer · 2018-03-05 05:08:11Z

0

Here's one way to do it (I also included a stackblitz: https://stackblitz.com/edit/angular-m47ktp):

<ng-container *ngFor="let item of items">
  <p>
    <button *ngIf="item.show === true; else inputField"
            [id]="'item-' + item.id" 
            (click)="item.show = false">
          {{item.text}}
    </button>
    <ng-template #inputField >
        <input type="text" [id]="item.id" />
    </ng-template>
  </p>
</ng-container>

Sample dataset:

 items: [
    {
      id: 1,
      text: 'Button 1',
      show: true,
    },
    {
      id: 2,
      text: 'Button 2',
      show: true,
    },
    {
      id: 3,
      text: 'Button 3',
      show: true,
    },
    {
      id: 4,
      text: 'Button 4',
      show: true,
    }
  ]

edited Mar 5, 2018 at 5:08

answered Mar 5, 2018 at 4:56

Boris Lobanov

2,4541 gold badge13 silver badges19 bronze badges

3 Comments

user3366195 Over a year ago

I am trying to not have the input in the DOM until the link is clicked. Actually the input is a datepicker which slows down actions on the page considerably.

Boris Lobanov Over a year ago

When you use *ngIf directive the element is not rendered unless the condition is met. It's not going to be in the dom, it's going to appear as a comment until the condition evaluates to true. So it's not going to slow anything down.

Boris Lobanov Over a year ago

As a general rule html elements belong in the template, so using a line of html code as a string in your model is very rarely a good idea.

Ishara Sandun · Accepted Answer · 2018-03-05 06:59:10Z

0

Easiest Method is as follows.By using only the template you can do this as follows. By using *ngIf it wont be rendered or created in the DOM unless the condition is true.So this is the best way.

<ng-container *ngFor="let item of items">
  <p>
    <button *ngIf="!item.isInputVisible"  (click)="item.isInputVisible=true"> {{ item.id }} </button>
    <input *ngIf="item.isInputVisible" type="text"  />
  </p>
</ng-container>

answered Mar 5, 2018 at 6:59

Ishara Sandun

7471 gold badge7 silver badges13 bronze badges

Collectives™ on Stack Overflow

How can I replace a link with an input after click in Angular 4

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related