title: Remove button on list item/array in Angular 12
body: <p>I'm trying to remove a list item with the click button, tried various options but it seems to not work. Hope you can help me out with this.</p>
  <p>On click i want to remove a list item from my users array. I will link the Typescript code alongside with the HTML.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Typescript code
  import { UsersService } from './../users.service';
  import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
  import { Iuser } from '../interfaces/iuser';
  
  @Component({
    selector: 'tr[app-table-row]',
    templateUrl: './table-row.component.html',
    styleUrls: ['./table-row.component.css']
  })
  export class TableRowComponent implements OnInit {
  
    @Input() item!: Iuser;
    @Output() userDeleted = new EventEmitter();
    
  
  removeUser(item: any) {
      this.userDeleted.emit(item);
    }
  
    constructor() {}
    ngOnInit(): void {}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;th scope="row"&gt;{{item.id}}&lt;/th&gt;
  &lt;td&gt;{{item.name}}&lt;/td&gt;
  &lt;td&gt;{{item.lastname}}&lt;/td&gt;
  &lt;td&gt;{{item.city}}&lt;/td&gt;
  &lt;td&gt; &lt;button class="btn btn-sm" (click)="removeUser(item)"&gt;remove&lt;/button&gt;&lt;/td&gt;</code></pre>
  </div>
  </div>
  </p>