Angular Web Component Example: Controlling the anchors inside HTML produced by Rich Text Editor

Suppose the content editors of your application are preparing content of the application in a Rich Text editor where they are adding links to other pages (internal as well as external). Now you want to control the clicks on those links for various reasons like:

1. Show some message on page when a link is clicked.
2. Logging the link clicks to an analytics tool like Google Analytics or Omniture etc.
3. Restrict the links pointing to some specific domains which may contain virus or for some other moderation purpose
4. Convert some links to XHR and use those to pull/show data on same page instead of navigating to other page.

These requirements can be achieved easily if the content markup (HTML) is not produced by rich text editor and is being controlled by the Angular application. But if this is not the case then we can either write some plain JavaScript code to modify the anchor clicks OR utilize Angular elements (Web Components). Let’s create a simple Angular Element to solve one of above requirements

Prerequisite

1. You should have basic setup for Angular project. Refer https://angular.io/cli. I am using version 9.1.9 but you can use any version that supports Angular Elements.
2. Add Angular Elements, refer https://angular.io/guide/elements
3. I am using bootstrap (4.5.2) for easy access of CSS styles but you can use any library like material, bootstrap, foundation etc.
4. Also using NgbModal from @ng-bootstrap/ng-bootstrap to quickly create modal for this example but you can have any modal as per your need.

Create an Angular Component to show a warning when external link is clicked

Create component AnchorComponent which takes href as input.

You can also create and use other properties like target, type, rel, media, hreflang, download as inputs as per your requirement.

This component will find out if the link passed is external or internal and accordingly show the link in template. This will also have a function to open model window so as to show a warning message when link is clicked and then open the external link in new tab/window. Internal links will be navigated directly without any warning.

Create template to show the link

Create anchor.html with template markup to show external and internal links in different ways. This template is using NgbModal to show message in modal window but you can use different one as per your preference. Clicking on external links will show warning message and internal links will be displayed as regular anchor.

Create CSS to show external links as anchors

Create a module which will define this component as Angular Element

Now we will define a module which will declare this component and also register it as a web component with tag ‘custom-anchor-element’

Component that is showing the HTML markup produced by content editors

This component is using a data service to fetch the html and adding it to innerHtml of a div. For purpose of this article I am returning a hardcoded html markup which has a table of social networking site links and some other links.

Below component has a function findAndReplaceAnchors which will replace all anchor links in html with the angular element we created above.

Define a safeHtml pipe so that innerHtml does not have any security issue.

Sample template for the component to show the HTML markup

Sample routing module

At last, add this component, safeHtml pipe and AnchorModule to the main module of your application which is being bootstrapped. In short, bring everything together.

Open the application in browser and you will see something like this:

Sample page showing a table with external links

On this page, all the links in table as well as link to ‘Wikipedia’ are external links but ‘Go to Another Heading’ is an internal link.

1. Clicking on any of the external links will show a warning message in modal window.
2. Clicking on ‘Open’ in modal will open the link in a new tab/window but clicking ‘Cancel’ or pressing escape will just remove the modal window and do nothing more.
3. Clicking on the internal link will not show any warning message.

Clicked ‘Click here’ in first row of table

Clicked ‘Launch’ in second row of table

This way we can intercept the anchor click and add additional functionality on top of it using Angular Elements.

Zone and Angular Element

It is recommended to include and use element-zone-strategy which will address the Angular zone issues as explained in https://www.npmjs.com/package/elements-zone-strategy

Clap if you like this article.