@dh-components/dh-directives

DH Directives

Conjunto de directivas para múltiples propósitos

Uso

Comprende una serie de directivas para la manipulación de diversos componentes. Contiene las siguientes directivas:

• AccessControlDirective: Manipula el DOM removiendo un elemento si algún valor no existe en un Array dado.
• ClickAndHoldDirective: Reacciona cuando se mantiene presionado el click principal del mouse.
• EkeyDirective: Evita que se escriba la letra E del teclado. Usarlo principalmente en Inputs de tipo numéricos.
• NextControlDirective: Pasa al siguiente control del DOM a través de su id cuando se presiona la tecla ENTER
• UppercaseDirective: Convierte un texto en un Input a mayúsculas.

Importar el módulo DhDirectivesModule en donde se requiera. El módulo necesita de valores para poder funcionar, para ello existe la función forRoot() donde se pasarán esos valores default.

Para importar de manera correcta el módulo se realiza lo siguiente:

DhDirectivesModule.forRoot(<interface> DirectivesConfig)

La interfaz DirectivesConfig comprende lo siguiente para asignar los valores:

Nombre	Tipo	Descripción
propId	string	Nombre de la Propiedad que se usará para buscar dentro del Array acciones
actions	Array<any>	Contenido de las acciones del sistema

AccessControlDirective

Una vez importado y asignado los valores del módulo DhDirectivesModule, en una etiqueta en el HTML ingresar el aributo dhAccessControl Ejemplo

<input placeholder="Test" [ngModel]="test" dhAccessControl />

Por default AccessControl oculta un elemento si no le se asigna un ID a buscar. Para que aparezca el elemento, asignar un valor a la propiedad idOpcion que se encuentra ya en la directiva dhAccessControl.

<input placeholder="Test" [ngModel]="test" dhAccessControl [idOpcion]="123" />

Una vez asignado el idOpcion dhAccessControl buscará ese elemento dentro del Array acciones que se implementó al momento de importar el módulo DhDirectivesModule y si no encuentra el valor, removerá esa etiqueta HTML del DOM, caso contrario si existe, mostrará el componente.

ClickAndHoldDirective

En un elemento HTML usar la directiva clickHold; para saber cuando se mantuvo presionado el click, utiliza la propiedad @Output('clickAndHold') . El @Output('clickAndHold') emite un aviso cuando se mantuvo presionado el click principal durante 100 milisegundos.

Ejemplo:

<div class="container" clickHold (clickAndHold)="click()">
  <span>Test</span>
</div>

EkeyDirective

En un elemento de tipo <input />, colocar la directiva eKey para evitar que se presione la tecla E. Ejemplo:

<input type="number" eKey />

NextControlDirective

En un elemento HTML colocar la directiva nextControl, para hacer focus a otro elemento dentro del DOM agregar la propiedad next con el valor del id del siguiente elemento.

Para obtener la instancia del siguiente elemento utilizar la propiedad @Output('next').

Ejemplo:

<input type="text" nextControl next="password" (next)="nextControl($event)" />
<input type="password" id="password" />

Esta directiva soporta algunos componentes de Angular Material y tratar de seleccionarlos de manera automática. En esta versión tiene soporte para los siguientes componentes de Angular Material:

• MatSelect: Automáticamente hace focus en un elemento MatSelect y expande su contenido. Ejemplo:

<input
  type="text"
  placeholder="Nombre de Comida"
  nextControl
  [next]="selectFoods"
/>
<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select #selectFoods>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

UppercaseDirective

En un elemento HTML de tipo <input /> colocar la directiva uppercase y al momento de escribir se convertirán las letras en mayúsculas. Ejemplo:

<input type="text" uppercase />