Ngx-Bootstrap - Tête de type

ngx-bootstrap La directive Typeahead fournit un composant Typeahead facile à utiliser, hautement configurable et facile à utiliser.

TypeaheadDirective

sélecteur

[typeahead]

Contributions

adaptivePosition - booléen, les ensembles utilisent la position adaptative.
container - string, Un sélecteur spécifiant l'élément auquel l'en-tête doit être ajouté.
dropup - booléen, cet attribut indique que la liste déroulante doit être ouverte vers le haut, par défaut: false.
isAnimated - booléen, activer / désactiver l'animation, par défaut: false.
optionsListTemplate- TemplateRef <TypeaheadOptionListContext>, utilisé pour spécifier un modèle de liste d'options personnalisées. Variables de modèle: correspondances, itemTemplate, requête.
typeahead - Typeahead, source d'options, peut être un tableau de chaînes, des objets ou un observable pour un processus de correspondance externe.
typeaheadAsync- booléen, ne doit être utilisé que si l'attribut typeahead est Observable of array. Si vrai - le chargement des options sera asynchrone, sinon - sync. true a du sens si le tableau d'options est grand.
typeaheadGroupField - chaîne, lorsque la source d'options est un tableau d'objets, le nom du champ qui contient la valeur du groupe, les correspondances sont regroupées par ce champ une fois définies.
typeaheadHideResultsOnBlur - booléen, utilisé pour masquer le résultat sur le flou.
typeaheadIsFirstItemActive- booléen, active le premier élément d'une liste. Par défaut: vrai.
typeaheadItemTemplate- TemplateRef <TypeaheadOptionItemContext>, utilisé pour spécifier un modèle d'élément personnalisé. Les variables de modèle exposées sont appelées item et index.
typeaheadLatinize- booléen, correspond aux symboles latins. Si vrai, le mot súper correspondrait à super et vice versa. Par défaut: vrai.
typeaheadMinLength- nombre, nombre minimal de caractères à saisir avant le début de la saisie. Lorsqu'il est défini sur 0, le typeahead s'affiche sur focus avec la liste complète des options (limité comme d'habitude par typeaheadOptionsLimit)
typeaheadMultipleSearch- booléen, peut être utilisé pour effectuer une recherche de plusieurs éléments et avoir des suggestions non pas pour la valeur totale de l'entrée mais pour la valeur qui vient après un délimiteur fourni via l'attribut typeaheadMultipleSearchDelimiters. Cette option ne peut être utilisée avec l'option typeaheadSingleWords que si les types typeaheadWordDelimiters et typeaheadPhraseDelimiters sont différents de typeaheadMultipleSearchDelimiters pour éviter tout conflit pour déterminer quand délimiter plusieurs recherches et quand un seul mot.
typeaheadMultipleSearchDelimiters- string, ne doit être utilisé que si l'attribut typeaheadMultipleSearch est vrai. Définit le délimiteur de recherche multiple pour savoir quand démarrer une nouvelle recherche. La valeur par défaut est une virgule. Si de l'espace doit être utilisé, définissez explicitement typeaheadWordDelimiters sur autre chose que l'espace car l'espace est utilisé par défaut OU définissez l'attribut typeaheadSingleWords sur false si vous n'avez pas besoin de l'utiliser avec une recherche multiple.
typeaheadOptionField- chaîne, lorsque la source d'options est un tableau d'objets, le nom du champ qui contient la valeur d'options, nous utilisons l'élément du tableau comme option au cas où ce champ serait manquant. Prend en charge les propriétés et méthodes imbriquées.
typeaheadOptionsInScrollableView - nombre, valeur par défaut: 5, spécifie le nombre d'options à afficher en mode défilement
typeaheadOptionsLimit- nombre, longueur maximale de la liste des éléments d'options. La valeur par défaut est 20.
typeaheadOrderBy- TypeaheadOrder, utilisé pour spécifier un ordre personnalisé de correspondances. Lorsque la source d'options est un tableau d'objets, un champ de tri doit être configuré. Dans le cas des options, la source est un tableau de chaînes, un champ de tri est absent. La direction de commande peut être changée en croissant ou décroissant.
typeaheadPhraseDelimiters- string, ne doit être utilisé que si l'attribut typeaheadSingleWords est vrai. Définit le délimiteur de mot pour correspondre à la phrase exacte. Par défaut, les guillemets simples et doubles.
typeaheadScrollable - booléen, valeur par défaut: false, spécifie si la tête de frappe peut faire défiler
typeaheadSelectFirstItem - booléen, Valeur par défaut: true, déclenché lorsqu'une liste d'options a été ouverte et l'utilisateur a cliqué sur Tab Si une valeur égale à true, elle sera choisie en premier ou élément actif dans la liste Si la valeur est égale à false, il sera choisi comme élément actif la liste ou rien
typeaheadSingleWords - booléen, valeur par défaut: true, peut être utilisé pour rechercher des mots en insérant un seul espace blanc entre chaque caractère, par exemple «C alifornia» correspondra à «California».
typeaheadWaitMs - nombre, temps d'attente minimal après le dernier caractère tapé avant le début de la frappe
typeaheadWordDelimiters- string, ne doit être utilisé que si l'attribut typeaheadSingleWords est vrai. Définit le délimiteur de mots pour casser les mots. La valeur par défaut est espace.

Les sorties

typeaheadLoading - déclenché lorsque l'état 'occupé' de ce composant a été modifié, déclenché en mode asynchrone uniquement, renvoie booléen.
typeaheadNoResults - tiré sur chaque événement clé et retourne true en cas de correspondance ne sont pas détectées.
typeaheadOnBlur- déclenché lorsqu'un événement de flou se produit. renvoie l'élément actif.
typeaheadOnSelect - déclenché lorsque l'option a été sélectionnée, retourne l'objet avec les données de cette option.

Exemple

Comme nous allons utiliser un Typeahead, nous devons mettre à jour app.module.ts utilisé dans le chapitre ngx-bootstrap Timepicker pour utiliserTypeaheadModule.

Mettez à jour app.module.ts pour utiliser le TypeaheadModule.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule,
      TimepickerModule.forRoot(),
      TypeaheadModule.forRoot()
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Mettez à jour test.component.html pour utiliser le composant timepicker.

test.component.html

<input [(ngModel)]="selectedState"
   [typeahead]="states"
   class="form-control">
<pre class="card card-block card-header mb-3">Model: {{selectedState | json}}</pre>

Mettez à jour test.component.ts pour les variables et méthodes correspondantes.

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   selectedState: string;
   states: string[] = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado',
   'Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois',
   'Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine',
   'Maryland','Massachusetts','Michigan','Minnesota','Mississippi',
   'Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey',
   'New Mexico','New York','North Dakota','North Carolina','Ohio',
   'Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina',
   'South Dakota','Tennessee','Texas','Utah','Vermont',
   'Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
   constructor() {}
   ngOnInit(): void {
   } 
}

Construire et servir

Exécutez la commande suivante pour démarrer le serveur angulaire.

ng serve

Une fois que le serveur est opérationnel. Ouvrez http: // localhost: 4200. Cliquez sur le bouton Ouvrir modal et vérifiez la sortie suivante.