Directivas de nativescript

Implementación de las directivas en nativescript

January 04, 2021 , 3 min read

Share with:

directivas nativescript

Indice

  1. Introduccion
  2. Implementacón

Introduccion

Las directivas utilizadas en nativescript son las mismas que las utilizadas en angular a continuacion se detalla cada una de las mismas. Las cuales nos permiten manipulacion y reutilizacion de codigo HTML.

Las directivas son la técnica que nos va a permitir crear nuestros propios componentes visuales

encapsulando las posibles complejidades en la implementación, normalizando y parametrizándolos según nuestras necesidades.

Clasificación

NgFor

nos permite generar muchos elementos HTML repetidos a partir del recorrido de un arreglo de datos. ejemplo:

componetent.html

<ScrollView sdkExampleTitle sdkToggleNavButton> <StackLayout class="list-group"> <StackLayout *ngFor="let fruit of fruitList" class="list-group-item"> <Label [text]="fruit"></Label> </StackLayout> </StackLayout> </ScrollView>

component.ts

import { Component } from "@angular/core"; import { fruits } from "./fruits"; @Component({ moduleId: module.id, templateUrl: "./ngfor-directive.component.html" }) export class NgForComponent { public fruitList: Array<string> = [ "Apple", "Apricot", "Avocado", "Banana", "Bilberry", "Blackberry", "Blackcurrant", "Blueberry", "Boysenberry", "Currant", "Cherry", "Cherimoya", "Cloudberry" ]; constructor() {} }

NgIf

condicionar si dicha marca debe agregarse a la página HTML.

ejemplo:

componetent.html

<StackLayout sdkExampleTitle sdkToggleNavButton> <StackLayout> <!-- >> using-ngif-html --> <button text="Mostra/Ocultar bloque" (tap)="onTap()" class="btn btn-primary btn-active" ></button> <GridLayout *ngIf="isVisible" class="bg-primary" borderRadius="2" height="300" ></GridLayout> <!-- << using-ngif-html --> </StackLayout> </StackLayout>

component.ts

import { Component } from '@angular/core'; @Component({ moduleId: module.id, templateUrl: "./ngif-directive.component.html" }) export class NgIfComponent { public isVisible: boolean = true; onTap() { if (this.isVisible) { this.isVisible = false; } else { this.isVisible = true; } } }

NgSwitch

La directiva ng-switch es similar a ng-if y como nos podemos imaginar es como el switch de la programación. Es decir que permite que entre varios conjuntos de tags solo esté uno de ellos, borrando los que no cumplen la condición.

ejemplo:

componetent.html

<GridLayout rows="100, *" columns="*" sdkExampleTitle sdkToggleNavButton> <!-- >> using-ngswitch-html --> <FlexboxLayout row="0" flexDirection="row"> <button flexShrink="0" class="btn btn-primary btn-active" margin="15" width="80" text="Azul" (tap)="onBlue()" ></button> <button flexShrink="0" class="btn btn-primary btn-active" margin="15" width="80" text="Morado" (tap)="onPurple()" ></button> <button flexShrink="0" class="btn btn-primary btn-active" margin="15" width="80" text="Amarrillo" (tap)="onYellow()" ></button> </FlexboxLayout> <GridLayout row="1" [ngSwitch]="color" class="p-15 m-t-15" height="280" borderRadius="2" > <GridLayout *ngSwitchCase="'purple'" backgroundColor="#8C489F"></GridLayout> <GridLayout *ngSwitchCase="'blue'" backgroundColor="#0077AF"></GridLayout> <GridLayout *ngSwitchCase="'yellow'" backgroundColor="#FFFF66"></GridLayout> <GridLayout *ngSwitchDefault backgroundColor="gray"></GridLayout> </GridLayout> <!-- << using-ngswitch-html --> </GridLayout>

component.ts

import { Component } from '@angular/core'; @Component({ moduleId: module.id, templateUrl: "./ngswitch-directive.component.html" }) export class NgSwitchComponent { public color: string; onBlue() { this.color = "blue"; } onPurple() { this.color = "purple"; } onYellow() { this.color = "yellow"; } }

Autor

Sígueme en Twitter @crisjc8

Sígueme en LinkedIn Cristhian Jumbo

Sígueme en Instagram crisweb.js