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".

<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).

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.

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.

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.

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

 @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.

form1.component.ts

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();
 }
}

form1.component.html

<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>

Form1.Designer.cs

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; }
    }
}

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

FrontEnd click handler executed