Skip to content

Instantly share code, notes, and snippets.

Embed
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';
@Component()
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';
@Component({
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() {
startComponents(this.ref.nativeElement);
}
ngOnDestroy() {
stopComponents(this.ref.nativeElement);
}
onButtonClick(ev: any) {
this.gondelComponent._handleClick(ev);
}
}
<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>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment