Skip to content

Instantly share code, notes, and snippets.

@DWboutin
Created September 25, 2019 19:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DWboutin/599f63fb88abd87e9966a2053dfca6b9 to your computer and use it in GitHub Desktop.
Save DWboutin/599f63fb88abd87e9966a2053dfca6b9 to your computer and use it in GitHub Desktop.
A minimalist wrapper to integrate React components in Angular with Angular-React
import { ReactWrapperComponent } from '@angular-react/core'
import {
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
NgZone,
OnInit,
Output,
Renderer2,
ViewChild
} from '@angular/core'
import { ButtonProps } from 'qohash-ui'
@Component({
selector: 'rk-button',
template: `
<Button #reactNode [variant]="variant" (onClick)="onClickHandler($event)">
<ReactContent><ng-content></ng-content></ReactContent>
</Button>
`,
styles: ['react-renderer']
})
export class RkButtonComponent extends ReactWrapperComponent<ButtonProps> implements OnInit {
@ViewChild('reactNode') protected reactNodeRef: ElementRef
@Input() variant?: ButtonProps['variant']
@Output() readonly onClick = new EventEmitter<MouseEvent>()
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, true)
}
onClickHandler(ev?: React.MouseEvent) {
this.onClick.emit(ev.nativeEvent)
console.log('click')
}
ngOnInit() {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment