How to use Angular template reference variable of input to bind particular button which have the same format

Question

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.

Answer 1

You are already passing the entire item object to the onTopNavClick event. Based on your html, the item object should contain the title and any other data that would help identify the item.

You are then forwarding this entire item to the sketchService, so sketch service already knows and can consume any of the properties you mentioned.

I wouldn't rely on the title, as that seems like a UI concern and not an identifier of the action to be taken. If you are able, add another property to the ToolNavItem with a more stable identifier, like eventId