for it working, needed:
```[ables]="[Editable]" [props]="({ editable: true })"```
and the code:
```
Editable = {
name: "editable",
props: [],
events: [],
render: (moveable: MoveableManagerInterface<any, any>, React: Renderer) => {
// React.createElement() ...
const rect = moveable.getRect();
const {pos2} = moveable.state;
const EditableViewer = moveable.useCSS("div", `
{
position: absolute;
left: 0px;
top: 0px;
will-change: transform;
transform-origin: 0px 0px;
}
.custom-button {
width: 24px;
height: 24px;
margin-bottom: 4px;
background: #4af;
border-radius: 4px;
appearance: none;
border: 0;
color: white;
font-weight: bold;
}
`);
return React.createElement(EditableViewer, {
key: "editable-viewer",
className: "moveable-editable",
style: {
transform: `translate(${pos2[0]}px, ${pos2[1]}px) rotate(${rect.rotation}deg) translate(10px)`
}
}, [
"\n ",
React.createElement("button", {
className: "custom-button",
onClick: () => {
alert("+");
}
}, [
"+"
]),
"\n ",
React.createElement("button", {
className: "custom-button",
onClick: () => {
alert("-");
}
}, [
"-"
]),
"\n "
]);
}
} as const
```
> Capture route change events in the following manner...
import { Component, OnInit, Output, ViewChild } from "@angular/core";
import { Router, NavigationStart, NavigationEnd, Event as NavigationEvent } from '@angular/router';
@Component({
selector: "my-app",
templateUrl: "app/app.component.html",
styleUrls: ["app/app.component.css"]
})
export class AppComponent {
constructor(private cacheComponentObj: CacheComponent,
private router: Router) {
/* Route event types
NavigationEnd
NavigationCancel
NavigationError
RoutesRecognized
*/
router.events.forEach((event: NavigationEvent) => {
//Before Navigation
if (event instanceof NavigationStart) {
switch (event.url) {
case "/app/home":
{
//Do Work
break;
}
case "/app/About":
{
//Do Work
break;
}
}
}
//After Navigation
if (event instanceof NavigationEnd) {
switch (event.url) {
case "/app/home":
{
//Do Work
break;
}
case "/app/About":
{
//Do Work
break;
}
}
}
});
}
}
