Directivas de nativescript

Implementación de las directivas en nativescript

January 04, 2021 , 3 min read

Share with:

directivas nativescript

Indice

Introduccion
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

@crisjc8

Cristhian Jumbo

Sígueme en Instagram crisweb.js

Directivas de nativescript

Indice

Introduccion

Clasificación

NgFor

NgIf

NgSwitch

Autor

Explora más temas