Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
[Gondel Angular Component Playground] Example implementation of an Angular Component with Gondel integration in mind. #gondel #angular
import { Component, EventListener, GondelBaseComponent } from '@gondel/core';
export class UIMyComponent extends GondelBaseComponent {
static componentName = 'MyComponent';
@EventListener('click', '.js-a-my-component__button')
_handleClick(ev: any) {
alert('Button clicked!');
import { ElementRef, Component, OnInit, OnDestroy, Input } from '@angular/core';
import { startComponents, stopComponents, getComponentByDomNode } from '@gondel/core';
import { UIMyComponent } from './MyComponent.gondel.ts';
selector: 'my-component',
templateUrl: `./MyComponent.view.html`
class MyComponent implements OnInit, OnDestroy {
private gondelComponent: UIMyComponent;
@Input() text = 'Press me!';
constructor(private ref: ElementRef) {
this.gondelComponent = getComponentByDomNode<UIMyComponent>(ref.nativeElement);
ngOnInit() {
ngOnDestroy() {
onButtonClick(ev: any) {
<div data-ng-name="MyComponent" class="a-my-component">
<button class="a-my-component__button js-a-my-component__button">{{text}}</button>
<button (click)="onButtonClick($event)">{{text}} (angular trigger gondel)</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment