Delete button element from array loop Angular

Question

I am trying to delete/remove the button from the array of 1st and 2nd index loop and display only at last index value or loop.

below is the code for approach:

import {
  Component,
  OnInit
} from '@angular/core';
import {
  FormGroup,
  FormControl
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  userForm = new FormGroup({
    name: new FormControl(),
    age: new FormControl()
  });

  masterData = [{
      name: 'alex',
      age: 20,
      button: 'no'
    },
    {
      name: 'bony',
      age: 21,
      button: 'no'
    },
    {
      name: 'acute',
      age: 23,
      button: 'yes'
    }
  ]
  ngOnInit() {

  }

html:

<div *ngFor="let data of masterData">
  <form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">
    Name: <input formControlName="name" placeholder="Enter Name"> Age: <input formControlName="age" placeholder="Enter Age">
    <button type="submit">Submit</button>
    <button type="button">display at last </button>

  </form>
</div>

The above is the code in which the the array of object is integrated, where the 'display at last" button should be displayed only for the last object of the array.

The approached is followed is to get the element-ref of the button from dom but it dint work. Please help me to solve this issue

For better understanding here is a link of code: https://stackblitz.com/edit/angular-chdfdh?file=src%2Fapp%2Fapp.component.ts

you can make a new array using Array.filter where you have only element with button = yes — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented May 22, 2020 at 7:59
Something like this : masterData.filter(ob => ob.button !== 'no') — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented May 22, 2020 at 8:01
yeah the purpose of adding variable button is there for better understanding, there will be no value in the object called button: no/yes...i have added to show the position — vinuta
– vinuta, Commented May 22, 2020 at 8:03
you can just add a variable to your *ngFor to detect the last item of the loop — manneJan89
– manneJan89, Commented May 22, 2020 at 8:06

manneJan89 · Accepted Answer · 2020-05-22 07:58:40Z

1

You can get the index from the *ngFor, like so:

<div *ngFor="let data of masterData; let last = last">
  <form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">
    Name: <input formControlName="name" placeholder="Enter Name"> Age: <input formControlName="age" placeholder="Enter Age">
    <button type="submit">Submit</button>
    <button type="button" *ngIf="last">display at last </button>
  </form>
</div>

So what is happening is that I am adding a variable called last to the last item of the for loop. Then only displaying the button if the variable is true, i.e. last item.

EDIT

I see that there is also a variable in the masterData. You can just use the variable from that to display the button.

For example:

<div *ngFor="let data of masterData; let last = last">
  ...
    <button type="button" *ngIf="data.button === 'yes'">display at last </button>
  </form>
</div>

answered May 22, 2020 at 7:58

manneJan89

1,0149 silver badges28 bronze badges

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

2 Comments

vinuta Over a year ago

Your first approach works fine for me because in my object i don't have variable called button, i just added here for better understanding

vinuta Over a year ago

can plsease help me this to implement in app.ts not in html

Collectives™ on Stack Overflow

Delete button element from array loop Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related