Heute zeigen wir, wie man ganz leicht das Klick Ereignis in Angular auf einem HTML Element anwenden kann. Mithilfe des Klick Events können Ereignisse ausgelöst werden sobald auf eine bestimmte Schaltfläche oder auch einen Knopf gedrückt wird.

Mithilfe der Event-Bindings in Angular ist das Vorgehen sehr einfach. Zuerst einmal generieren wir uns ganz einfach eine Angular Komponente mithilfe der Angular-CLI. In unserem Beispiel nennen wir die Komponente einfach "click", also geben wir folgendes in die Konsole ein (Wir gehen davon aus, dass ein Angular Projekt bereits erzeugt worden ist):

ng generate component click

Als nächstes öffnen wir die erzeugte HTML Datei der gerade generierten Komponente und erzeugen und eine kleine Fläche, auf der wir das Klick Ereignis ausführen wollen:

Klick Komponente HTML

Daraufhin bearbeiten wir die Schaltfläche mit CSS, um diese auch sichtbar für uns zu machen. Das Ergebnis sieht daraufhin so aus:

Html Zwischenergebnis

Jetzt schauen wir uns noch einmal das erste Bild an. In der "Div" erkennen wir anhand der runden Klammern, dass es sich dabei um ein Angular Binding handelt. In unserem Beispiel haben wir jetzt dem Click Event, welches ganz normal ebenfalls in HTML unterstützt wird, nun die Funktion "clickMe()", welche wir noch schreiben müssen, als Input definiert. Unser Ziel ist es, dass wenn wir auf die rosa Fläche klicken, wir einen Output in der Browser Konsole sehen können. Damit das auch passiert, müssen wir jetzt die Funktion "clickMe()" implementieren. Dafür öffnen wir die erzeugte Typescript Datei der erzeugten Komponente und implementieren dort die Funktion:

Typescript Datei

Die Funktion ist zum Glück relativ übersichtlich. Mithilfe der "console.log" Funktion können wir Konsolenausgaben im Browser tätigen. Wenn wir jetzt auf die rosa Schaltfläche drücken, sollte mithilfe des Bindings der Funktion das "Click" Event unsere "clickMe()" Funktion ausführen und dann entsprechend "Schaltfläche Klick hat geklappt!" in die Konsole schreiben. Also zum Test:

Resultat

Und es hat geklappt! Hier das Resultat zum selbst ausprobieren: