Find an element by its id in the html file

Question

I have an array

items = [{
"id" : 1,
"name": "peter"},
{
"id" : 2,
"name": "john"}
    ...
]

I am trying to find an item in the html file by the id based on that, I am trying to hide and element.

It can be easily done in js file, but I am trying to see if there is an easy way to do it in html file

Answer 1

You can add a template selector to the element

<input #myElement>

Then you can add a reference in your ts file

@ViewChild('myElement') myInput: ElementRef<HtmlInputElement>;

Or even reference the element directly in the template

<button (click)="myElement.focus()"></button>

• https://angular.io/api/core/ViewChild
• https://angular.io/api/core/ElementRef

Answer 2

If you want to hide an item, lets say its index is 2, you can do something like this in the HTML

<ng-container *ngFor="let eachItem of allArrayItems; let index=i">
  <div *ngIf="i != 2">  // This ngIf will be hidden if the index is 2
     whatever logic
  </div>
</ng-container>