Adding FrontEnd element properties and JS listeners

In some scenarios, the migrated application has client-side Javascript logic and you will need to update the implementation manually, this way you can use the migrated application components or use the "Angular way" to accomplish the legacy behavior and take full advantage of the new technology.

Renderer

You can use Angular's renderer to add attributes, classes, styles or properties easily to an element.

For example, if you want to add a style or update a value you can use the renderer's setStyle and setProperty methods.

Legacy JavaScript function:

function myFunction() {
    var tb = document.getElementById('textbox1');
    var inpName = document.getElementById('input1');

    tb.value = inpName.value;
    tb.style.fontWeight = 'bold';
    tb.style.color = 'green';
 }

Legacy html:

<asp:TextBox ID="textbox1" runat="server">
</asp:TextBox>

<INPUT id="input1" type="hidden" value="0" runat="server" name="input1"/>

Manually converted TypeScript method:

myFunction(): void {
    const tb = document.querySelector<HTMLInputElement>(
      "#textbox1 input" //textbox1 is a component, we need to access the root html element
    );
    const inpName = document.querySelector<HTMLInputElement>("#input1");

    this.render.setProperty(tb, "value", inpName.value);
    this.render.setStyle(tb, "fontWeight", "bold");
    this.render.setStyle(tb, "color", "green");
}

Migrated html:

 <wm-asp-textbox #textbox1 id="textbox1" [model]="model.textbox1" class="textbox1">
 </wm-asp-textbox>
 
 <INPUT wmHtmlControl [model]="model.input1" id="input1" type="hidden" value="0" name="input1">

Remember that the "renderer" reference is usually in the migrated component constuctor or you can add it youself if needed.

constructor (render: Renderer2, wmService: WebMapService, cdr: ChangeDetectorRef ,elem: ElementRef, webComponents: WebComponentsService) {
      super(wmservice,changeDetector,render2,elem,webComponents);
}

JS Listeners

If you have custom listeners and they cannot be converted using the WebMAP infrastructure, you can select the specific element and use the addEventListener.

For example:

Legacy click listener (jQuery):

$("#btn1").click(function (e) {
  // custom logic to be executed every time the button's click is triggered            
 });

Legacy html:

<asp:LinkButton ID="btn1" runat="server"/>

Manually converted TypeScript:

addBtnListener(): void {
    document.querySelector("#btn1 a").addEventListener("click", (event) => {
        // custom logic to be executed every time the button's click is triggered
    });
}

We added the click listener to the anchor element, but you can add any available event for a specific element.

.html file:

<wm-link-button id="btn1" [model]="model.btn1" class="btn1">
</wm-link-button>

The addBtnListener should be called after the page's components are fully initialized. For this, we can use Angular's lifecycle hook AfterViewInit.

.ts file:

ngAfterViewInit(): void {
    this.addBtnListener();
}