Can you create example for Angular? I get error - TypeError: Cannot read properties of undefined (reading 'nativeElement')

[AAlex-11]

this is my page

  <StackLayout orientation="horizontal">
            <canvasView #canvas width="300" height="300" style="border-width: 1; border-style: solid; border-color: red;" (draw)="draw($event)" (tap)="canvasTap()" />
  </StackLayout>

this is code

   export class ItemDetailComponent implements OnInit {

     @ViewChild("canvas", { static: false }) canvasElementRef: ElementRef<CanvasView>;
     canvas:CanvasView;

     ngOnInit(): void {
       registerElement('CanvasView', () => CanvasView);
       this.canvas=this.canvasElementRef.nativeElement
     }

     canvasTap(){
         this.canvas.backgroundColor = "green"
     }
   }

line "this.canvas=this.canvasElementRef.nativeElement" produced error: TypeError: Cannot read properties of undefined (reading 'nativeElement'). Without this line there is nothing reference to nativeElement and nothing showing on page.

Where is mistake?

[farfromrefug]

@AAlex-11 there is an example in the doc https://github.com/nativescript-community/ui-canvas?tab=readme-ov-file#nativescript--angular as for this.canvas=this.canvasElementRef.nativeElement it is an angular issue not related to this plugin.

[AAlex-11]

thank for answer, @farfromrefug I use a couple of your modules, it working fine, for example gesture module working perfectly, but I still don't understand how to use this Canvas Hm, look strange, because canvasElementRef.nativeElement - working fine with any other native Android component and I don't see in this CanvasView any meaningful Android methods https://developer.android.com/reference/android/graphics/Canvas, for example drawARGB, do you know how to execute they?

[farfromrefug]

@AAlex-11 if you go in the draw event then it is working. now i dont know what event.Proxy is supposed to be but it does not come from that plugin Here is a vue example of how it works https://github.com/nativescript-community/ui-canvas/blob/master/demo-snippets/vue/Simple.vue#L24. CanvasView does not expose Canvas methods. Those methods are on the Canvas object you get from the event

[AAlex-11]

Thank you, @farfromrefug . Your example code is working with Angular.

However, I have one more question. Why canvas.getImage() in your example return undefined?

[farfromrefug]

@AAlex-11 you need to pass the bitmap/imageSource on Canvas creation as you would on Android (native). In the case of canvasview you cant as it is not a normal Canvas (RecordingCanvas). You need to search on the web on how to get image from view "screenshot"