Nativescript Angular2

Thread is closed for posting
2 posts, 0 answers
  1. Live
    Live avatar
    12 posts
    Member since:
    Oct 2016

    Posted 17 Apr 2017 Link to this post

    Hi Nativescript team,
    1. nativescript share plugin how to use in html 
    eg: <Label text="Nativescript"></Label>
    2. how to connect local dummy json in angular 2 project?
    3.how to fix a add button on bottom of a screen it should be fixed?
    4. dummy json data should be have share function, how can do these?
  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 18 Apr 2017 Link to this post

    Hi,
    First of all, thank you for your interest in NativeScirpt Angular 2.

    While using nativescript-social-share  in a NativeScript Angular project you should only to import the plugin and to use some of its method (e.g. shareText, shareImage) on the tap event of some of the elements. For example:
    HTML 
    <Button text="Share text" (tap)="sharetext()"></Button>

    TypeScript
    import * as SocialShare from "nativescript-social-share";
    sharetext(){
            SocialShare.shareText("I love NativeScript!");
        }

    Regarding the second while using local JSON file, the best way is to require it in the needed place, which gives you an access to its content and it is possible to bind the needed data to the specific component.
    HTML
    <Label [text]="sampletitle" textWrap="true"></Label>

    TypeScript
    var testJson = require("~/test.json")
     
    @Component({
        selector: "ns-items",
        moduleId: module.id,
        templateUrl: "./items.component.html",
    })
    export class ItemsComponent implements OnInit {
        items: Item[];
        sampletitle="";
     
        constructor(private itemService: ItemService) {
             
         }
     
        ngOnInit(): void {
     
            this.sampletitle=testJson["glossary"]["title"]
        }
     
       
    }

    About the fix button issue I would suggest using nativescript-floatingactionbutton plugin and GridLayout, which allows to setup the right position of the component. For example:
    <ActionBar title="My App" class="action-bar">
    </ActionBar>
    <GridLayout rows="auto, *">
        <StackLayout row="0" class="page">
            <Label [text]="sampletitle" textWrap="true"></Label>
             
            <Button text="Share text" (tap)="sharetext()"></Button>
        </StackLayout>
        <FAB row="1"  (tap)="fabTap()" icon="res://icon" rippleColor="#f1f1f1" class="fab-button"></FAB>
    </GridLayout>

     Bear in mind that to use the plugin in NS Angular project you should first register the plugin's component in project's main.ts file. Further instructions about the setup instructions could be found here.

    For further help, you could also review the attached sample application.

    To share some functionality for the different components in the project you could create custom service component and use it the places, where it is needed. For more help, you could review the way it is done in the sample-Groceries project and its LoginService here you will find how it LoginService has been created and then how to use it in the different components


    Hope this information helps.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    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.
Back to Top