Now, I'm trying to find the way to bind the input with button from the row of button for opening image by following the example of Mr. ruth. However, the row of buttons in my web application have the same format like this one: topnav.component.html:

<button
  mat-button
  *ngFor="let item of toolNavItems"
  (click)='onTopNavClick(item)'
  [class.active]="item.selected"
  [title]="item.title"
>
  <mat-icon [class]="item.icon">{{item.icon}}</mat-icon>
  
</button>

topnav.component.ts:

export class TopnavComponent implements OnInit {

    @Output() topnavSelect: EventEmitter<ToolNavItem> = new EventEmitter();
    toolNavItems: ToolNavItem[];

    constructor(
        private sketchService: SketchService,
    ) { }

    ngOnInit(): void {
        this.sketchService.menusObs.pipe(untilDestroyed(this)).subscribe(menus => {
            this.toolNavItems = menus;
        });
    }

    onTopNavClick(selectedTopnavItem: ToolNavItem) {
        this.topnavSelect.emit(this.sketchService.selectMenu(selectedTopnavItem));
    }

}

The hidden input for opening image for display will be something like this one:

<input #inputFile class="ng-hide" style="display:none;" name="file" multiple type="file" accept=".jpg, .png, .jpeg, .JPG, .PNG, .JPEG" (change)="getFiles($event)"/>

How can I bind the input to the particular button according to the value of item or item.title which is the only way to separate the row of button to the chosen button?

Here is the item values for the button in sketchService class which I want to bind the onclick event of the button to click() function of Angular template reference variable [(click)="inputFile.click()"] :

{
    id: 'upload_image',
    title: 'Upload Image for Blending',
    icon: 'image',
    type: 'passive'
  }

Please tell me how to do that. Initially, I consider using *ngIf to detect the value of item.id as the way to assign appropriate function for onclick event of the button according to the following psudocode:

*ngIf item.id is 'upload_image'
   (click)="inputFile.click()"
else 
   (click)="onTopNavClick(item)"

However, the article *ngIf and *ngFor on same element causing error has compelled me to think twice. You have said that using ID of HTML element would be better alternative, but I wonder how can I detect the ID of HTML element for Angular. Please give me an advice.