Using Angular to bind a click event to an element after it has been compiled

Question

Using Angular to bind a click event to an element after it has been compiled

I am currently developing an application for students using Angular 5. In this application, users can access and view various documents. When a user enters a document, a set of tools, including a marker tool, are displayed. This marker tool allows users to highlight text within the document. These markers are saved on the server with a unique ID assigned to each marker in the document. The document structure is as follows:

[{
        "chapterId": "254125",
        "title": "Some random title",
        "blocks": [{
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet..."
                }
            },
            {
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet..."
                }
            },
            {
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet..."
                }
            }
        ]
    },
    {
        "chapterId": "254125",
        "title": "Another random title",
        "blocks": [{
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet..."
                }
            },
            {
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet..."
                }
            },
            {
                "blockId": "12654654",
                "blockContent": {
                    "text": "Lorem ipsum dolor sit amet..."
                }
            }
        ]
    }
]

Each block represents a paragraph in a chapter. By looping through the chapters and blocks within each chapter, I create the actual document (Document example). When retrieving markers from the server, I receive an object like this:

{
  "id": 20,
  "start": 125,
  "end": 258,
  "color": "red",
  "chapterId": 12631561,
  "blockId": 121651
}

Using this information, I search for the appropriate chapter and block to place the marker at the correct position within the text block:

public placeMarkerOnBlock(chapter, marker): any {
    let tempText: string = '';

    /* Here we loop the blocks to find the right one to place the marker. */
    chapter.blocks.some((block) => {
      if (marker.blockId === block.blockId) {
        const blockText = block.blockElement.text;
        // Other logic for placing the marker within the text
      }
    });
    return chapter;
  }

After setting up the markers, I need to attach a click event handler to each marker so that when users click on a marker within the text, a small bubble appears with an option to remove that specific marker. However, I have been facing challenges with adding the (click)="" event dynamically. Is there an alternative approach to achieve this functionality more effectively?

angular typescript

Answer 1

Answer №1

It seems like the issue you're encountering is due to trying to attach an event to dynamically generated and dynamic nature HTML elements. If you are using jQuery, you can attach a click event to dynamic HTML like this:

 $(document).on("click", "a.remove" , function() {
        // add your logic here
    });

Here, "a.remove" refers to: a: an anchor tag that is dynamically generated, remove: a regular class on the anchor tag.

If you prefer not to use jQuery and would like to handle everything in Angular, you can load your HTML in the life cycle hook ngOnInit(). Once the HTML has fully loaded, you can then create a click event on dynamically generated HTML using ngAfterViewInit().

 ngAfterViewInit(): void {

 // write logic to add click event to generated html
}

 ngOnInit() {
    //load your data here
}

Answer 2

It seems like the issue you're encountering is due to trying to attach an event to dynamically generated and dynamic nature HTML elements. If you are using jQuery, you can attach a click event to dynamic HTML like this:

 $(document).on("click", "a.remove" , function() {
        // add your logic here
    });

Here, "a.remove" refers to: a: an anchor tag that is dynamically generated, remove: a regular class on the anchor tag.

If you prefer not to use jQuery and would like to handle everything in Angular, you can load your HTML in the life cycle hook ngOnInit(). Once the HTML has fully loaded, you can then create a click event on dynamically generated HTML using ngAfterViewInit().

 ngAfterViewInit(): void {

 // write logic to add click event to generated html
}

 ngOnInit() {
    //load your data here
}

Using Angular to bind a click event to an element after it has been compiled

Answer №1

Similar questions

Error occurs when attempting to call Angular from NodeJS

What is the best way to fully reload an Angular component when the route is changed?

Exploring the power of makeStyles in Material UI when combined with TypeScript

The function validation_1.validateName in Ionic/Angular is not recognized as a valid function, causing an error that prevents

Simple methods for ensuring a minimum time interval between observable emittance

Struggling to retrieve the 'this' object using a dynamic string

Adjust the setting for the useHash parameter within the RouterModule during execution

Angular 2 Mixup: Using Leaflet and Google Maps with Incorrect Tile Order

Form an object using elements of a string array

Utilizing Filters (Pipes) in Angular 2 Components without Involving the DOM Filters

I want to create a feature in Angular where a specific header becomes sticky based on the user's scroll position on the

The powerful combination of Visual Studio 2015, TypeScript, Cordova, Angular 2, and System

A Step-by-Step Guide on Modifying the Default Button in Angular2CSV

What is the best way to add a clickable link/button in Angular 8 that opens a webpage in a new tab?

Discovering the JavaScript source file for a package using WebStorm and TypeScript

ASP.NET Core responds with a 404 error when an Angular request is made

How can one click the button within the expanded dropdown while hovering over the navigation item in Angular and Bootstrap?

Having difficulty importing SVG files in TypeScript

Tips for clearing out text in a <p> tag with javascript when it exceeds a specific length of 100 characters

Transferring information between screens in Ionic Framework 2