This is a migrated thread and some comments may be shown as answers.

Images not appearing in the drawer(Nativescript Angular)

2 Answers 67 Views
SideDrawer
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
cherian
Top achievements
Rank 1
cherian asked on 26 Aug 2017, 09:54 AM

Apologies my last post got submitted accidently

I am trying to create a qr code and insert the image created by a qrcode library into the rad side drawer 
Following is the code 

HTML 
<RadSideDrawer #drawer [transition]="sideDrawerTransition" selectionBehavior="None"  height="100%">   
           <StackLayout tkDrawerContent class="sidedrawer-left">      
               <ScrollView row="0" col="2">        
                  <StackLayout class="sidedrawer-content">
                       <Image #qrCode height="100" width="100" ></Image>
                 </StackLayout>       
              </ScrollView>                           
          </StackLayout>
         <StackLayout tkMainContent class="bg-primary" height="100%" >    

         </StackLayout>

</RadSideDrawer>

 

TS file

 

@ViewChild('qrCode') qrCode: ElementRef;

 

//this is the code I run where i try to generate a qr code and assign to the image tag.

this.ngZone.runOutsideAngular(() => {                            
           var ZXing = require('nativescript-zxing');
           var zx = new ZXing();
           var imageSource = require('image-source');
           var img = zx.createBarcode({encode: user.PhoneNumber, height: 100, width: 100, format: ZXing.QR_CODE});
            this.qrCode.nativeElement.imageSource = imageSource.fromNativeSource(img);                             }

 

the above code does not work and gives me an error saying qrCode is undefined. 

When I move the image tag and place it in the tkMainContent  stacklayout I can see the QR code image.

Any ideas how to resolve this issue

Thanks

2 Answers, 1 is accepted

Sort by
0
Nikolay Tsonev
Telerik team
answered on 28 Aug 2017, 06:32 AM
Hi Cherian,

I reviewed your case and tested nativescript-zxing plugin in a NativeScript Angular application, however, it seems to work as expected and the QRCode is generated properly. 
Regarding that, I am attaching sample code, where it is demonstrated, how to use it in NativeScript Angular.

The important part of the code is that you should load the newly generated image on ngAfterViewInit event.

ngAfterViewInit() {
         
       
        var zx = new ZXing();
        var img = zx.createBarcode({encode: "Test", height: 100, width: 100, format: ZXing.QR_CODE});
        this.qrCode.nativeElement.src=img;
        this.drawer = this.drawerComponent.sideDrawer;
        this._changeDetectionRef.detectChanges();
    }

Regards,
nikolay.tsonev
Progress Telerik
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
0
cherian
Top achievements
Rank 1
answered on 28 Aug 2017, 06:43 AM

Thank you Nikolay for your time and support :)

Will try your solution and in case of any issues will post it here. 

Cheers

Tags
SideDrawer
Asked by
cherian
Top achievements
Rank 1
Answers by
Nikolay Tsonev
Telerik team
cherian
Top achievements
Rank 1
Share this question
or