Html Question posted in
Some basic documentation can be found here.

Html – How does this Angular "button" actually work?

This clickable element: enter image description here

when inspected in chrome is represented by this html:

    <div _ngcontent-kkl-c57="" class="cursor-pointer text-tibco-gray-L14 hover:text-tibco-gray-L16 ng-star-inserted">
        <a _ngcontent-kkl-c57="" class="flex items-center">
            <tss-icon _ngcontent-kkl-c57="" class="flex mr-2 w-4 h-4">
                <div class="fill-current w-full">
                    <svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <polygon points="11 7 11 4 15 8 11 12 11 9 4 9 4 7 11 7"></polygon>
                        <path d="M8,2V1H1.75A.75.75,0,0,0,1,1.75v12.5a.749.749,0,0,0,.75.75H8V14H2V2Z"></path>
                    </svg>
                </div>
            </tss-icon>
            <span _ngcontent-kkl-c57="" title="Log out">Log out</span>
        </a>
    </div>

It works (results in some actions in response to a click).
My question is how does this html result in a click event being captured and handled?

To clarify, if I saw

<div onclick="handler()"/>

or

<a href = "...

I would understand.
In this case I don’t even see any of the elements with an attribute that looks like onclick might be captured or at least the element can be uniquely identified in case onclick is captured in some ancestor of it. I am obviously very new to Angular and it’s probably something basic that I am missing.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The question was really answered by Guy Incognito in a comment, but to make it clear what the answer is, and to prove to myself that it actually works I made a test page. The HTML file contains:

    <html>
    <head>
        <script>
            function onInit()
            {
                const element = document.createElement("button"); 
                element.innerText = "Click Me";
                element.addEventListener("click",onInit);
                document.body.appendChild(element);
                alert("HELLO");
            }
        </script>
    </head>
    <body onload="onInit()">
    </body>
</html>

    When loaded in Chrome and "Inspect"ed it shows this:

        <html>
        <head>
            <script>
                function onInit()
                {
                    const element = document.createElement("button"); 
                    element.innerText = "Click Me";
                    element.addEventListener("click",onInit);
                    document.body.appendChild(element);
                    alert("HELLO");
                }
            </script>
        </head>
        <body onload="onInit()">
            <button>Click Me</button>
        </body>
    </html>

    Has new button that works. It's obvious now, but somehow it was not obvious to me before so I think it should be exposed to others with the same question.


  2. 0

    In Angular, you can use event binding to listen for events such as clicks and perform actions in response to them. In this case, the tag containing the "Log out" text is likely bound to a click event handler using Angular’s (click) syntax.

    For example, in the component code for this HTML template, there may be a method called logout() that handles the click event when the LogOut button is clicked. And in the HTML code, the (click)="logout()" syntax is used to bind the click event of the tag to this method.

    So, when a user clicks on the Log Out button, Angular’s event binding system captures the click event and calls the logout() method to perform any necessary actions. This allows you to handle the click event without needing to directly add a click event handler to the HTML element itself.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search