Custom Checkbox behaviour using icon fonts


#1

Hey Everyone,

I hope this may help you!

Here i have written and explained the custom checkbox creation in Nativescript with angular application.

Before we proceed please go through the using Icon-fonts in nativescript.

Lets Start…!

  • Download the .ttf file of icon fonts.

  • In your NativeScript application app folder, create a folder called fonts and place the .ttf there.

post

  • Create the separate css classes for both icon fonts.

.CSS

.css
.icon-checkbox-checked {
   content: "\ea52";
   font-family: 'checkbox-checked';
   font-size: 18;
 }
 .icon-checkbox-unchecked {
   content: "\32";
   font-family: 'checkbox-unchecked';
   font-size: 18;
 }

  • Actual .HTML file
.HTML

<ListView [items]="items" class="list-group">
       <ng-template let-searchResults="item" let-i="index">
         <GridLayout class="list-group-item" rows="*" columns="auto,*,*,*">
           <Label *ngIf="!searchResults.checked" text="&#x32;" class="icon-checkbox-unchecked" (tap)="changeIcon(searchResults)" ></Label>           
           <Label *ngIf="searchResults.checked" text="&#xea52;" class="icon-checkbox-checked" (tap)="changeIcon(searchResults)" ></Label>
           <Label col="1" [text]="searchResults.id"></Label>
           <Label col="2" [text]="searchResults.name"></Label>
           <Label col="3" [text]="searchResults.role"></Label>
         </GridLayout>
       </ng-template>
     </ListView>

  • Actual Component File
.TS

       public ab: boolean;

//Array items

private items = new Array<Item>(

       { id: 1, name: "Ter Stegen", role: "Goalkeeper", checked:false},


       { id: 3, name: "Piqué", role: "Defender", checked:false},


       { id: 4, name: "I. Rakitic", role: "Midfielder", checked:false },


       { id: 5, name: "Sergio", role: "Midfielder", checked:false },


       { id: 6, name: "Denis Suárez", role: "Midfielder", checked:false },


       { id: 7, name: "Arda", role: "Midfielder", checked:false },


       { id: 8, name: "A. Iniesta", role: "Midfielder", checked:false },


       { id: 9, name: "Suárez", role: "Forward", checked:false },


       { id: 10, name: "Messi", role: "Forward", checked:false },


       { id: 11, name: "Neymar", role: "Forward", checked:false },


       { id: 12, name: "Rafinha", role: "Midfielder", checked:false },


       { id: 13, name: "Cillessen", role: "Goalkeeper", checked:false },


       { id: 14, name: "Mascherano", role: "Defender", checked:false },


       { id: 17, name: "Paco Alcácer", role: "Forward", checked:false },


       { id: 18, name: "Jordi Alba", role: "Defender", checked:false },


       { id: 19, name: "Digne", role: "Defender", checked:false },


       { id: 20, name: "Sergi Roberto", role: "Midfielder", checked:false },


       { id: 21, name: "André Gomes", role: "Midfielder", checked:false },


       { id: 22, name: "Aleix Vidal", role: "Midfielder", checked:false },


       { id: 23, name: "Umtiti", role: "Defender", checked:false},


       { id: 24, name: "Mathieu", role: "Defender", checked:false},


       { id: 25, name: "Masip", role: "Goalkeeper", checked:false },


   );

//Tap event method

  public changeIcon(args) {
       console.log("--------------r " + JSON.stringify(args))
       this.ab = args.checked;
       console.log("--------------let a " + JSON.stringify(ab))
       switch (this.ab) {
           case false:
               args.checked = true;
               console.log("--------------af " + JSON.stringify(args))
               break;
           case true:
               args.checked = false;
               console.log("--------------df " + JSON.stringify(args))
               break;
       }
   }

Hope this may help and save the someone time :grinning: