Take photo and pass to another component


#1

Hi everyone,

I’m using NativeScript with Angular 2. I have created a TabView sample app.

This is my tabs.component.ts where I check if the active tab is the camera tab and if it is it launches the camera and I can take a photo. Then I would like to take that photo and display it in the camera tab.

import { Component, OnInit } from "@angular/core";
import { isAndroid } from "platform";
import { SelectedIndexChangedEventData, TabView, TabViewItem } from "tns-core-modules/ui/tab-view";

import * as camera from "nativescript-camera";
import {Image} from "ui/image";
import {View} from 'ui/core/view';
import {Page} from 'ui/page';
import {EventData} from 'data/observable';
import {ActionBar} from "ui/action-bar";


var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
var Observable = require("data/observable").Observable;
var myImage;
var view = require("ui/core/view");

@Component({
    selector: "TabsComponent",
    moduleId: module.id,
    templateUrl: "./tabs.component.html",
    styleUrls: ["./tabs.component.css"]
})
export class TabsComponent implements OnInit {

    private _title: string;

    constructor(private page:Page) {
        /* ***********************************************************
        * Use the constructor to inject app services that will be needed for
        * the whole tab navigation layout as a whole.
        *************************************************************/
    }

    ngOnInit(): void {
        /* ***********************************************************
        * Use the "ngOnInit" handler to initialize data for the whole tab
        * navigation layout as a whole.
        *************************************************************/
    }


    public isklj(page){
        console.log("Isklj radi!");
    }

    get title(): string {
        return this._title;
    }

    set title(value: string) {
        if (this._title !== value) {
            this._title = value;
        }
    }

    /* ***********************************************************
    * The "getIconSource" function returns the correct tab icon source
    * depending on whether the app is ran on Android or iOS.
    * You can find all resources in /App_Resources/os
    *************************************************************/
    getIconSource(icon: string): string {
        return isAndroid ? "" : "res://tabIcons/" + icon;
    }

    /* ***********************************************************
    * Get the current tab view title and set it as an ActionBar title.
    * Learn more about the onSelectedIndexChanged event here:
    * https://docs.nativescript.org/cookbook/ui/tab-view#using-selectedindexchanged-event-from-xml
    *************************************************************/
    onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
        const tabView = <TabView>args.object;
        const selectedTabViewItem = tabView.items[args.newIndex];

        this.title = selectedTabViewItem.title;

         if(this.title == "Kamera" ) {  

            // console.log("Jupi ja ja jee!!"); 
            
               this.launchCamera();

        }  
    }



    launchCamera(){

         camera.takePicture(options).then(function(picture) {
            let image = new Image();
            image.src = picture;

            
        }).catch((err) => {
            console.log("Error -> " + err.message);
        });
    } 


        

}



Here is the GitHub repository of the project.


#2

@Draugnim
Use a service.
store the image source there, via some method, say yourService.setImageSource()

after setting, emit an event.
subscribe to that event in the camera tab, also, read the image source from the service in your camera tab.


#3

@multishiv19
Could you point me to a similar example. I am not familiar with services and events since I’m new to NativeScript and Android development in general.
Appreciate your help very much.


#4

@Draugnim
This video should help