Adding FrontEnd element properties and JS listeners
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
You can use Angular's 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:
Legacy html:
Manually converted TypeScript method:
Migrated html:
Remember that the "renderer" reference is usually in the migrated component constuctor or you can add it youself if needed.
For example:
Legacy click listener (jQuery):
Legacy html:
Manually converted TypeScript:
We added the click listener to the anchor element, but you can add any available event for a specific element.
.html file:
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:
If you have custom listeners and they cannot be converted using the WebMAP infrastructure, you can select the specific element and use the .