typescript - Lägg till en etikett till kryssruta/växel Angular 2

Jag försöker lägga till kryssrutor, men jag har läst att det bara är möjligt att använda ... och ändrar bilden när den klickas på. Men det fungerar inte (onTap()-funktionen). Eftersom det inte fungerade. Mitt andra alternativ är att använda switch.

Hur lägger jag till en etikett på kryssruta/växel? Eftersom den här raden inte fungerade:

<label><switch [checked]="checked" (tap)="onTap()" align="right"> </switch>Employees </label>

Min sync.component.ts-fil:

import {Component, EventEmitter} from '@angular/core';
import {NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
import {APP_ROUTER_PROVIDERS} from "../app.routes"
import ImageModule = require("ui/image");
var ImageSourceModule = require("image-source");

var image1 = new ImageModule.Image();
var image2 = new ImageModule.Image();

image1.imageSource = ImageSourceModule.fromResource("checkbox_checked");
image2.imageSource = ImageSourceModule.fromResource("checkbox_unchecked");
image1.src = "~/checkbox_checked.png";
image2.src = "~/checkbox_unchecked.png";

@Component({
selector: "checkbox",
inputs: ["checked : checked"],
outputs: ["tap"],
template: `

<StackLayout backgroundColor="#b3d9ff" width="300" height="550">

  <Label style="font-size : 20px" text="Choose contacts to sync" horizontalAlignment="center"></Label>
  <switch [checked]="checked" (tap)="onTap()" align="right"> </switch>
  <Label text= "Employees" horizontalAlignment="center"></Label>
  <switch [checked]="checked" (tap)="onTap()" align="right"> </switch>
  <Label text= "Clients" horizontalAlignment="center"></Label>


    <Image
      [src]="checked ? '~/checkbox_checked' : '~/checkbox_unchecked'"
      class="checkbox"
      (tap)="onTap()"
      dock="left"
      width="20" height="20"
      align = "right"></Image>

</StackLayout> `
})

 export class SyncComponent{
 public tap:     EventEmitter<boolean> = new EventEmitter<boolean>();
 public checked: boolean = false;

 //constructor() { }

 public onTap(): void {
     this.tap.next(this.checked);
 }
 }

Här är skärmdumpen:

Jag vill att de anställda och klienterna ska vara bredvid strömbrytare/rutor.

Svar #1

sätt varje Label- och Switch-tagg inuti en extra StackLayout

<StackLayout orientation="horizontal">
   <Label ... />
   <Switch ... />
</StackLayout>

Svar #2

Du kan titta på den här sidan, den berättar vad du ska göra.

http://docs.nativescript.org/cookbook/ui/switch

Allt du behöver göra extra är att säga åt det att gå till horisontellt, så här:

<StackLayout orientation="horizontal">
   <Switch checked="true"></Switch>
   <Button isEnabled="true" text="This is a Button!"></Button>
 </StackLayout>