[Gondel Angular Component Playground] Example implementation of an Angular Component with Gondel integration in mind. #gondel #angular

MyComponent.gondel.ts

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!');
  }
}

MyComponent.ng.ts

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);
  }
}

MyComponent.view.html

<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>