mardi 19 juillet 2016

Add a label to checkbox/switch Angular 2

I'm trying to add checkboxes, but I read that it is only possible to use ... and changes the image when it's clicked. However, it's not working (onTap() function). Since didn't work. My second options is to use switch.

How do I add a label to checkbox/switch ? Since this line didn't work:

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

My sync.component.ts file:

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);
 }
 }

Here is the screenshot:

enter image description here

I want those Employees and Client be beside switches/checkboxes.




Aucun commentaire:

Enregistrer un commentaire