# Adding FrontEnd Handler to a ToolStripMenuItem

The following section will guide you through this case scenario, in which you would need to add a click handler for a ToolStripItem that is implemented in the FrontEnd code (instead of triggering a request to the BackEnd).

Let's assume that the developer already has a migrated webmap app, where there is a form named **Form1**, it has a BindingNavigator control named **bindingNavigator1** which has a ToolStripItem named **newlyAddedButton**.

The following file is named "form1.component.html".

```markup
<div *ngIf="model">
    <wm-window [model]="model" id="Form1" class="MigratedApp_Form1">
        <ng-template let-model>
            <div class="Form1">
                <wm-bindingnavigator #bindingNavigator1 id="bindingNavigator1" [model]="model.bindingNavigator1" class="bindingNavigator1" tabindex="1"></wm-bindingnavigator>
            </div>
        </ng-template>
    </wm-window>
</div>
```

To accomplish this requirement, the modifications must be done in the **form1.component.ts** file (showed below).&#x20;

```javascript
import { Component, ChangeDetectorRef, ElementRef
, Output, Renderer2, ViewEncapsulation} from "@angular/core";
import { EventData, dataTransfer} from "@mobilize/base-components";
import { FormComponent} from "@mobilize/winforms-components";
import { WebMapService} from "@mobilize/angularclient";
@Component({
   selector : "form1",
   styleUrls : ["./form1.component.css"],
   templateUrl : "./form1.component.html",
   encapsulation : ViewEncapsulation.None
})
@dataTransfer(["Form1"])
export class Form1Component extends FormComponent {
   protected webServices : WebMapService;
   constructor (wmservice : WebMapService,
   changeDetector : ChangeDetectorRef,render2 : Renderer2,elem : ElementRef) {
      super(wmservice,changeDetector,render2,elem);
   }
}
```

1. Add a ViewChild (<https://angular.io/api/core/ViewChild>) variable in the Form1Component to reference the BindingNavigator control.

```javascript
import { Component, ChangeDetectorRef, ElementRef
, Output, Renderer2, ViewEncapsulation, ViewChild} from "@angular/core";
import { EventData, dataTransfer} from "@mobilize/base-components";
import { FormComponent} from "@mobilize/winforms-components";
import { WebMapService} from "@mobilize/angularclient";
@Component({
   selector : "form1",
   styleUrls : ["./form1.component.css"],
   templateUrl : "./form1.component.html",
   encapsulation : ViewEncapsulation.None
})
@dataTransfer(["Form1"])
export class Form1Component extends FormComponent {
   protected webServices : WebMapService;
   constructor (wmservice : WebMapService,
   changeDetector : ChangeDetectorRef,render2 : Renderer2,elem : ElementRef) {
      super(wmservice,changeDetector,render2,elem);
   }
   
  @ViewChild("bindingNavigator1", { static: false })
  bindingNav: any;
}
```

2\. Bind the AfterViewInit lifecycle hook in the Form1Component in order to add the logic needed to bind the click of the ToolsStripItem element.

```javascript
import { Component, ChangeDetectorRef, ElementRef
, Output, Renderer2, ViewEncapsulation, ViewChild, AfterViewInit} from "@angular/core";
import { EventData, dataTransfer} from "@mobilize/base-components";
import { FormComponent} from "@mobilize/winforms-components";
import { WebMapService} from "@mobilize/angularclient";
@Component({
   selector : "form1",
   styleUrls : ["./form1.component.css"],
   templateUrl : "./form1.component.html",
   encapsulation : ViewEncapsulation.None
})
@dataTransfer(["Form1"])
export class Form1Component extends FormComponent implements AfterViewInit {
   protected webServices : WebMapService;
   constructor (wmservice : WebMapService,
   changeDetector : ChangeDetectorRef,render2 : Renderer2,elem : ElementRef) {
      super(wmservice,changeDetector,render2,elem);
   }
   
  @ViewChild("bindingNavigator1", { static: false })
  bindingNav: any;
  
  ngAfterViewInit(): void {
   // logic to bind the toolstripitem goes here.
 }
}
```

The logic goes in the AfterViewInit method because when this lifecycle hook is executed the variable used to reference the BindingNavigator control is defined with the reference to the actual BindingNavigator.&#x20;

3\. Add the following code on the Form1Component's ngAfterViewInit method.

```javascript
 @ViewChild("bindingNavigator1", { static: false })
 bindingNav: any;
 newItemClickSub: Subscription;

 ngAfterViewInit(): void {
  this.newItemClickSub = this.bindFrontEndClickHandler('newlyAddedButton', (e) => alert('item clicked!'));
 }
 
 bindFrontEndClickHandler(itemName: string, handler: any) : Subscription {
  if (this.bindingNav) {
    const itemModel = this.bindingNav.items.filter(
      (x) => x.Name === itemName
    );
    if (itemModel.length > 0) {
      const itemComponent =
        this.bindingNav.webComponents.componentsCollection[
          itemModel[0].id
        ];
      return itemComponent.Click.subscribe(handler);
    }
  }
 }
```

The following is the final code.

{% tabs %}
{% tab title="form1.component.ts" %}

```typescript
import { Component, ChangeDetectorRef, ElementRef
, Renderer2, ViewEncapsulation, ViewChild, OnDestroy, AfterViewInit} from "@angular/core";
import { dataTransfer} from "@mobilize/base-components";
import { FormComponent} from "@mobilize/winforms-components";
import { WebMapService} from "@mobilize/angularclient";
import { Subscription } from "rxjs/internal/Subscription";
@Component({
   selector : "form1",
   styleUrls : ["./form1.component.css"],
   templateUrl : "./form1.component.html",
   encapsulation : ViewEncapsulation.None
})
@dataTransfer(["Form1"])
export class Form1Component extends FormComponent implements AfterViewInit, OnDestroy {
   constructor (private wmservice : WebMapService,
   changeDetector : ChangeDetectorRef,render2 : Renderer2,elem : ElementRef) {
      super(wmservice,changeDetector,render2,elem);
   }

   @ViewChild("bindingNavigator1", { static: false })
  bindingNav: any;
  newItemClickSub: Subscription;

  ngAfterViewInit(): void {
   this.newItemClickSub = this.bindFrontEndClickHandler('newlyAddedButton', (e) => alert('item clicked!'));
 }

 bindFrontEndClickHandler(itemName: string, handler: any) : Subscription {
  if (this.bindingNav) {
    const itemModel = this.bindingNav.items.filter(
      (x) => x.Name === itemName
    );
    if (itemModel.length > 0) {
      const itemComponent =
        this.bindingNav.webComponents.componentsCollection[
          itemModel[0].id
        ];
      return itemComponent.Click.subscribe(handler);
    }
  }
 }

 ngOnDestroy(): void {
   this.newItemClickSub?.unsubscribe();
 }
}
```

{% endtab %}

{% tab title="form1.component.html" %}

```markup
<div *ngIf="model">
    <wm-window [model]="model" id="Form1" class="AddingNotWebMapForm_Form1">
        <ng-template let-model>
            <div class="Form1">
                <wm-bindingnavigator #bindingNavigator1 id="bindingNavigator1" [model]="model.bindingNavigator1" class="bindingNavigator1" tabindex="1"></wm-bindingnavigator>
            </div>
        </ng-template>
    </wm-window>
</div>
```

{% endtab %}

{% tab title="Form1.Designer.cs" %}

```csharp
using Mobilize.WebMap.Common.Attributes;
using Mobilize.Web.Extensions;

namespace AddingNotWebMapForm
{
    partial class Form1
    {

      /// <summary>
      /// Required designer variable.
      /// </summary>
      [Intercepted]
      private Mobilize.Web.Controls.Interfaces.IContainer components { get; set; } = null;

      /// <summary>
      /// Clean up any resources being used.
      /// </summary>
      /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>

      protected override void Dispose(bool disposing)
      {
          if (disposing && (components != null))
         {
             components.Dispose();
         }
         base.Dispose(disposing);
     }

      [Mobilize.WebMap.Common.Attributes.Designer]

      #region Windows Form Designer generated code

      /// <summary>
      /// Required method for Designer support - do not modify
      /// the contents of this method with the code editor.
      /// </summary>
      private
         void InitializeComponent()
      {
          this.components = new Mobilize.Web.ControlCollection();
          System.ComponentModel.ComponentResourceManager resources = new System.ComponentModel.ComponentResourceManager(typeof(Form1));
          this.bindingNavigator1 = new Mobilize.Web.BindingNavigator(this.components);
          this.toolStripButton1 = new Mobilize.Web.ToolStripButton();
            this.newlyAddedButton = new Mobilize.Web.ToolStripButton();
            this.button1 = new Mobilize.Web.Button();
          this.bindingNavigator1.SuspendLayout();
          this.SuspendLayout();
          // 
          // bindingNavigator1
          // 
          this.bindingNavigator1.Items.AddRange(new Mobilize.Web.ToolStripItem[] {
            this.toolStripButton1,
          this.newlyAddedButton});
            this.bindingNavigator1.Location = new System.Drawing.Point(0, 0);
            this.bindingNavigator1.Name = "bindingNavigator1";
            this.bindingNavigator1.Size = new System.Drawing.Size(294, 25);
            this.bindingNavigator1.TabIndex = 0;
            this.bindingNavigator1.Text = "bindingNavigator1";
         // 
         // toolStripButton1
         // 
         this.toolStripButton1.DisplayStyle = Mobilize.Web.ToolStripItemDisplayStyle.Image;
         this.toolStripButton1.Image = "assets/images/AddingNotWebMapForm.Resources.clock.png";
         this.toolStripButton1.Properties().ImageTransparentColor = System.Drawing.Color.Magenta;
         this.toolStripButton1.Name = "toolStripButton1";
         this.toolStripButton1.Size = new System.Drawing.Size(23, 22);
         this.toolStripButton1.Text = "toolStripButton1";
         this.toolStripButton1.Click += new System.EventHandler(this.toolStripButton1_Click);
            // 
            // toolStripButton1
            // 
            this.newlyAddedButton.DisplayStyle = Mobilize.Web.ToolStripItemDisplayStyle.Image;
            this.newlyAddedButton.Image = "assets/images/help_16x16.png";
            this.newlyAddedButton.Properties().ImageTransparentColor = System.Drawing.Color.Magenta;
            this.newlyAddedButton.Name = "newlyAddedButton";
            this.newlyAddedButton.Size = new System.Drawing.Size(23, 22);
            this.newlyAddedButton.Text = "newlyAddedButton";
            // 
            // button1
            // 
            this.button1.Location = new System.Drawing.Point(100, 58);
         this.button1.Name = "button1";
         this.button1.Size = new System.Drawing.Size(75, 23);
         this.button1.TabIndex = 1;
         this.button1.Text = "button1";
         this.button1.UseVisualStyleBackColor = true;
         this.button1.Click += new System.EventHandler(this.button1_Click);
         this.Properties().AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
         this.Properties().AutoScaleMode = Stub._System.Windows.Forms.AutoScaleMode.Font;
         this.ClientSize = new System.Drawing.Size(294, 91);
         this.Controls.Add(this.button1);
         this.Controls.Add(this.bindingNavigator1);
         this.Name = "Form1";
         this.Text = "Form1";
         this.bindingNavigator1.ResumeLayout(false);
         this.bindingNavigator1.PerformLayout();
         this.ResumeLayout(false);
         this.PerformLayout();

     }

     #endregion

      [Intercepted]

      private Mobilize.Web.BindingNavigator bindingNavigator1 { get; set; }

      [Intercepted]
      private Mobilize.Web.Button button1 { get; set; }

      [Intercepted]
      private Mobilize.Web.ToolStripButton toolStripButton1 { get; set; }

      [Intercepted]
      private Mobilize.Web.ToolStripButton newlyAddedButton { get; set; }
    }
}
```

{% endtab %}
{% endtabs %}

Once you compile the application (both Backend and FrontEnd projects), you will be able to run the app.

![FrontEnd click handler executed](/files/4WAWdE4YDinEvSdC5DqI)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/winforms/extend-or-modify-the-converted-application/adding-frontend-handler-to-a-toolstripmenuitem.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.