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

Nativescript Angular2

1 Answer 58 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Live
Top achievements
Rank 1
Live asked on 17 Apr 2017, 08:54 AM
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?

1 Answer, 1 is accepted

Sort by
0
Nikolay Tsonev
Telerik team
answered on 18 Apr 2017, 08:47 AM
Hi,
First of all, thank you for your interest in NativeScirpt Angular 2.

While using  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 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.
Tags
General Discussion
Asked by
Live
Top achievements
Rank 1
Answers by
Nikolay Tsonev
Telerik team
Share this question
or