@pea11y/selectally-angular v2.1.1

Bibliothèque Selectally Angular

Le champ à autocomplétion selectally-angular est un composant constitué de plusieurs éléments :

1- Un champ de texte sur une ligne

2- Un élément associé qui s'affiche au besoin pour aider les utilisateurs à choisir une valeur dans le champ. Cet élément est une liste, appelé une popup.

3- Un bouton graphique qui indique la disponibilité de la popup. Activer ce bouton affiche la popup si des suggestions sont possibles.

Cette bibliothèque a été générée avec Angular CLI version 10.2.4.

Génération de code

Exécutez ng generate nom-composant du composant --project selectally-angular pour générer un nouveau composant. Vous pouvez également utiliser ng generate directive | pipe | service | class | guard | interface | enum | module --project selectally-angular.

Remarque: N'oubliez pas d'ajouter --project selectally-angular sinon il sera ajouté au projet par défaut dans votre fichierangular.json.

Construire

Exécutez ng build selectally-angular pour construire le projet. Les artefacts de construction seront stockés dans le répertoire dist /.

Publication

Après avoir construit votre bibliothèque avec ng build selectally-angular, allez dans le dossier distcd dist / selectally-angular et exécutez npm publish.

Pour le développement, allez dans le dossier distcd dist / selectally-angular et exécutez npm link, afin de publier la bibliothèque en local sur votre machine de développement.

Exécution de tests unitaires

Exécutez npm test,npm run test:lib:coverage pour exécuter les tests unitaires via Jest.

Aide supplémentaire

Pour obtenir plus d'aide sur la Angular CLI, utilisez ng help ou consultez la page Présentation et référence des commandes de la Angular CLI.

Attributs

Exemple d'utilisation

1- Importer le composant:

  import { SelectallyAngularModule } from 'selectally-angular';
  @NgModule({
  declarations: [
  AppComponent
  ],
  imports: [
  SelectallyAngularModule
  ],
  bootstrap: [AppComponent]
  })
  export class AppModule { }

2- Déclarer les paramètres:

  // obligatoires
  ariaLabel = "Libellé du pays";
  ou
  ariaLabelledBy ="label-pays";
  itemLibelle = "paysLib";
  items=
  [
        { "paysLib": 'Allemagne', 'paysVal': '44' },
        { "paysLib": 'Australie', 'paysVal': '44' },
        { "paysLib": 'Argentine', 'paysVal': '32' }
  ]
  // optionnels
  btnPopup  = true;
  open  = true;
  nbCaracteres = 3;
  disabled  = false;
  updating  = false;


3- Intégration:

<lib-selectally-angular
    [ariaLabelledBy]="ariaLabelledBy" [itemLibelle]="itemLibelle" (changeEmit)="onChange($event)"
    (selectedValueEmit)="onSelectedValue($event)" [disabled]="disabled" [updating]="updating" [open]="open"
    [items]="items" [btnPopup]="btnPopup" [nbCaracteres]="nbCaracteres">
</lib-selectally-angular>