CODEWITHSUNDEEP
angular
Jack
Jack

Reputation: 241

Open only specific input field created with ngFor loop in Angular

I have the following code:

table.component.html:

...
<tr *ngFor="let item of items; let i = index">
        <td>{{i+1}}</td>
        <td>{{ item.name }}</td>

        <td>
          <div *ngIf='!openDateSold; else dateEdit2'>
            {{ item.dateSold | date:'MM/dd/yyyy, hh:mm a'}}
            <br>
            <button class="icon-button" type="button" (click)='showDateSold()'>
              <i class="glyphicon glyphicon-pencil pencil" style="font-size:15px"></i>
            </button>
          </div>
          <ng-template #dateEdit2>
            <input id="date" #date type="datetime-local" [ngModel]="item.dateSold | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="item.dateSold=$event">
            <button type="button" (click)='showDateSold()'>
              <i class="glyphicon glyphicon-pencil pencil"></i>
            </button>
          </ng-template>
        </td>
</tr>
...

table.component.ts:

...
export class TableComponent implements OnInit {
  public openDateSold: boolean;
  ...
  ngOnInit() {
    this.openDateSold = false;
  }
  showDateNotified() {
    this.openDateNotified = !this.openDateNotified;
  }
  ...
}

The third <td> creates a column that looks like this: Image of third column

I should be able to click the pencil icon and edit that specific date. However, when I click it, it opens the input field for all the dates. Here's an image where you can see what I mean: Image of third column after clicking icon

How can I make it so that when I click an icon, it only shows the input field in that specific cell?

Upvotes: 0

Views: 1062

Answers (3)

madalinivascu
madalinivascu

Reputation: 32354

Create a component and use its scope:

main component

<table>
<tr *ngFor="let item of items; let i = index">
    <td>{{i+1}}</td>
    <td>{{ item.name }}</td>

  <item item="item"></item>
</tr>
</table>

ts:

@Component({
  selector: 'item',
  templateUrl: './item.component.html',
  styleUrls: [ './item.component.css' ]
})
export class ItemComponent  {
  openDateSold;
  openDateNotified:any;
  @Input() item:any
ngOnInit() {
    this.openDateSold = false;
  }
  showDateSold() {
    this.openDateSold = !this.openDateSold;
  }
}

html:

<td>
    <div *ngIf='!openDateSold; else dateEdit2'>
        {{ item.dateSold | date:'MM/dd/yyyy, hh:mm a'}}
        <br>
        <button class="icon-button" type="button" (click)='showDateSold()'>
              <i class="glyphicon glyphicon-pencil pencil" style="font-size:15px"></i>
            </button>
    </div>
    <ng-template #dateEdit2>
        <input id="date" #date type="datetime-local" [ngModel]="item.dateSold | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="item.dateSold=$event">
        <button type="button" (click)='showDateSold()'>
              <i class="glyphicon glyphicon-pencil pencil"></i>
            </button>
    </ng-template>
</td>

demo:stackblitz

if you want only one item to be open you should try this

Upvotes: 1

Chellappan வ
Chellappan வ

Reputation: 27409

Define this varibale in TS

toggle=[]

<tr *ngFor="let item of items; let i = index">
        <td>{{i+1}}</td>
        <td>{{ item.name }}</td>

        <td>
          <div *ngIf='!openDateSold; else dateEdit2'>
            {{ item.dateSold | date:'MM/dd/yyyy, hh:mm a'}}
            <br>
            <button class="icon-button" type="button" (click)='showDateSold();toggle[i]=!toggle[i]'>
              <i class="glyphicon glyphicon-pencil pencil" style="font-size:15px"></i>
            </button>
          </div>
          <ng-template #dateEdit2>
            <input id="date" #date type="datetime-local" [ngModel]="item.dateSold | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="item.dateSold=$event">
            <button type="button" (click)='showDateSold();toggle[i]=!toggle[i]'>
              <i class="glyphicon glyphicon-pencil pencil"></i>
            </button>
          </ng-template>
        </td>
</tr>

...

Upvotes: 0

Krishna Rathore
Krishna Rathore

Reputation: 9687

You can use

I have create a demo on Stackblitz

Component.html

<tr *ngFor="let item of items; let i = index">
    <td>{{i+1}}</td>
    <td>{{ item.name }}</td>

    <td>
        <div *ngIf='!item.isEdit'>
            {{ item.dateSold | date:'MM/dd/yyyy, hh:mm a'}}
            <br>
            <button class="icon-button" type="button" (click)='showDateNotified(item)'>
                <i class="glyphicon glyphicon-pencil pencil" style="font-size:15px"></i>
            </button>
        </div>
        <div *ngIf='item.isEdit'>
            <input id="date" #date type="datetime-local" [ngModel]="item.dateSold | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="item.dateSold=$event">
            <button type="button" (click)='showDateNotified(item)'>
                <i class="glyphicon glyphicon-pencil pencil"></i>
            </button>
        </div>
    </td>
</tr>

Component.ts

showDateNotified(items:any) {
    items.isEdit = !items.isEdit;
}

Upvotes: 0

Related Questions