L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
3 façons d'implémenter des menus déroulants dans Angular à l'aide de Kendo UI
L'installation du paquet Kendo UI Dropdown dans votre application Angular vous donnera accès à d'autres composants tels que la saisie semi-automatique, la liste déroulante, la liste déroulante, etc. Dans cet article, nous verrons comment utiliser ces composants dans notre application Angular. .
Kendo UI est une bibliothèque utilisée pour créer des applications plus rapidement. Il fournit des composants d'interface utilisateur pour des bibliothèques telles que jQuery, Angular, React et Vue. Il contient plus de 20 composants permettant de créer des graphiques, des tableaux de données et des pages de glisser-déposer. La bibliothèque est facilement personnalisable et fournit un ensemble de thèmes pour Material UI, Bootstrap, etc.
Les composants de Kendo UI sont distribués sous la forme de multiples packages npm afin que vous ne craignez pas de gonfler votre application avec des composants inutiles et d’accroître votre bundle de build. Il offre des composants pour la gestion de grands ensembles de données et pour une visualisation aisée des données.
Les composants Dropdown fournis par Kendo UI sont utiles pour la mise en oeuvre de champs à complétion automatique et de versions plus sophistiquées de l'élément select natif. L'installation du package Dropdown dans votre application Angular vous donnera accès à d'autres composants tels que la saisie semi-automatique, la liste déroulante, la liste déroulante, etc. Dans cet article, nous verrons comment nous pouvons utiliser ces composants dans notre application Angular.
Suivez ce tutoriel, une compréhension de base de Angular est requise. Assurez-vous également que Node est installé sur votre ordinateur personnel. Si vous n'avez aucune connaissance préalable de Angular, veuillez suivre le tutoriel officiel ici et télécharger le nœud pour votre PC ici si vous ne l'avez pas déjà fait.
Nous les utiliserons outils pour construire notre application:
Initialisation de l'application et installation des dépendances
Pour commencer, nous allons utiliser le CLI (interface de ligne de commande) fourni par l'équipe Angular pour initialiser notre projet. Commencez par installer la CLI en exécutant npm install -g @ angular / cli . npm est un gestionnaire de paquets utilisé pour installer des paquets. Il sera disponible sur votre PC si vous avez Node installé; sinon, téléchargez le nœud ici .
Pour créer un nouveau projet Angular à l'aide de la CLI, ouvrez un terminal et exécutez:
pour créer un nouveau projet angulaire --style = scss . ]
Cette commande est utilisée pour initialiser un nouveau projet angulaire. le projet utilisera SCSS comme pré-processeur.
Ensuite, exécutez la commande suivante dans le dossier racine du projet pour installer les dépendances:
Ng add @ progress / kendo-angular-dropdowns
Ouvrez un terminal dans le dossier du projet et démarrez l'application en exécutant ng serve . Si vous ouvrez votre navigateur et visitez le lien http: // localhost: 4200 vous devriez voir la capture d'écran ci-dessous si tout s'est bien passé.
[1965]
Ce composant est idéal pour gérer les entrées avec beaucoup d'options. Il fournit un champ de saisie dans lequel l'utilisateur entre une valeur de recherche et le composant affiche une liste de suggestions similaires à la valeur de recherche. Ce composant prend en charge le regroupement, le filtrage, la liaison de données, etc. Pour commencer, ouvrez le fichier app.component.html de votre projet et remplacez le contenu par l'extrait ci-dessous:
< kendo-autocomplete placeholder = [19659021] " Entrez un nom ... " > </ kendo-autocomplete >
Cela rendra un composant de saisie semi-automatique simple. Si vous accédez à http: // localhost: 4200 vous devriez le voir en flux continu.
Le composant ne fera pas grand chose dans son état actuel. Nous souhaitons transmettre des valeurs de données au composant et obtenir la sélection de l'utilisateur dans le composant. Pour ce faire, nous allons utiliser des liaisons. Vous pouvez transmettre une valeur à la liaison du composant du composant et le composant affichera la valeur liée.
Mettez à jour le fichier app.component.ts pour créer une nouvelle propriété à associer. au composant sélecteur de date. Ouvrez le fichier et créez une propriété appelée aujourd'hui :
import { Composant } de '@ angular / core' ; [
@ Composant ( {
sélecteur : 'app-root'
templateUrl : './ app.component.html'
styleUrls : [ './ app.component.scss' ]
} )
export class AppComponent 19659030] {
name = 'Peter'
}
Ensuite, mettez à jour le fichier de modèle pour utiliser la valeur du composant de saisie semi-automatique. Ouvrez le fichier app.component.html et mettez-le à jour pour ajouter une valeur obligatoire au sélecteur de date:
< kendo-autocomplete placeholder . = " Entrez un nom ... " [value] = " nom " > </ kendo-autocomplete >
Les composants de saisie semi-automatique ont été conçus pour fournir à l'utilisateur des suggestions lors de la frappe. Nous n’avons pas nécessairement un ensemble de données volumineux à suggérer à l’utilisateur, mais nous pouvons fournir au composant une liste de noms à filtrer. Le tableau de noms sera lié à la liaison d’entrée de données du composant.
Mettez à jour le fichier de composant pour créer le tableau de noms . Ouvrez le fichier app.component.ts et copiez-y le contenu ci-dessous:
import { Composant } de '@ angular / core ';
@ Composant ( {
sélecteur : 'app-root'
templateUrl : './ app.component.html'
styleUrls : [ './ app.component.scss' ]
} )
export class AppComponent 19659030] {
name = 'Peter' ;
names = [
"John"
"Mary"
"Hannah"
"Richard" [19659088] 'Rosy'
'Peter'
]
}
Joignez ensuite les données de l'élément AutoComplete. Ouvrez le fichier app.component.html et mettez à jour le contenu pour qu'il soit semblable à l'extrait ci-dessous:
< kendo-autocomplete placeholder = " Entrez un nom ... " [value] = " nom " [data] = [19659021] " names " > </ kendo-autocomplete > 
. 
Avec cette mise à jour, nous pouvons transmettre des valeurs du fichier de composant au modèle, mais l'entrée d'un utilisateur ne sera pas mise à jour car nous avons utilisé une liaison unidirectionnelle. Pour transmettre des valeurs de composant à la vue et inversement, nous devons mettre à jour la liaison de la valeur .
Mettez à jour le fichier app.component.html pour utiliser la méthode bidirectionnelle. binding:
< kendo-autocomplete placeholder = " Entrez un nom ... " [(value)] = " name " [data] = " noms " > </ kendo-autocomplete >
Nous pouvons également utiliser les formulaires réactifs avec le composant de saisie semi-automatique. Créez un groupe de formulaires pour gérer la valeur de nom FormControl et affectez la propriété name à un FormControl . Mettez à jour le fichier app.component.html pour qu'il soit similaire à l'extrait de code ci-dessous:
// app.component.html
< formulaire [formGroup] = " formulaire " (soumettre) = " onSubmit () " >
< kendo-autocomplete placeholder = " Entrez un nom ... " formControlName = " name " [data] = " noms " > </ kendo- autocomplete >
< button type = " submit " > log </ bouton ]>
</ forme >
Dans l’extrait ci-dessus, nous utilisons l’approche des formulaires réactifs en créant un groupe de formulaires pour gérer les contrôles de formulaire. Cette approche basée sur un modèle garantit la synchronisation des valeurs entre la vue et le composant.
Mettez à jour le fichier app.component.ts pour créer la propriété FormGroup:
import { Composant } de '@ angular / core' ;
import { FormControl FormGroup } de '@ angular / forms' ;
@ Composant ( {
sélecteur : 'app-root'
templateUrl : './ app.component.html'
styleUrls : [ './ app.component.scss' ]
} )
export class AppComponent 19659030] {
name = "Peter" ;
names = [
"John"
"Mary"
"Hannah"
"Richard" [19659088] 'Rosy'
'Peter'
]
form = new FormGroup ( {
nom : nouveau FormControl ( ce . nom )
} )
le Subscription ([19659021]) {
console . log ( ceci . forme . valeur )
}
}
Pour utiliser les formulaires réactifs, vous devez importer le module ReactiveFormsModule dans le fichier app.module.ts :
import { BrowserModule } de '@ angular / platform-browser' ;
import { RéactifFormModule } de '@ angular / forms' ; ]
@ NgModule ( {
déclarations : [
]
importations : [
Formulaire de formulaire réactif
]
fournisseurs : []
bootstrap : [ AppComponent ]
} )
classe d'exportation AppModule {].
Après cette mise à jour, vous pouvez cliquer sur le bouton d'envoi après avoir mis à jour le sélecteur de date pour enregistrer les valeurs mises à jour sur la console.
Filtrage des données
Le composant AutoComplete fournit une méthode filterChange qui est déclenchée chaque fois que la valeur de recherche change. À l'aide du déclencheur, vous pouvez configurer un gestionnaire personnalisé pour extraire dynamiquement les données de votre source de données. Voyons comment nous pouvons utiliser cette liaison de sortie pour extraire des données d'une source externe.
Dans le fichier app.component.ts nous allons implémenter une requête de recherche simple pour le . RestCountries API permettant d'extraire les pays contenant des lettres correspondant à la requête de recherche:
import { Composant } de '@ angular / core' ;
import { FormControl FormGroup } de '@ angular / forms' ;
@ Composant ( {
sélecteur : 'app-root'
templateUrl : './ app.component.html'
styleUrls : [ './ app.component.scss' ]
} )
export class AppComponent 19659030] {
name = '' ;
apiUrl = 'https://restcountries.eu/rest/v2/name/' ;
countries = [
]
handleFilter ( valeur ) {
ce . http . 19659210] get ( ` $ { ceci . apiUrl } $ { valeur } ` ) . abonnez-vous ( ([1945921]) . . => {
const résultats = res . carte ( pays => pays
Source link