Quand utiliser Kendo UI pour du matériel angulaire plutôt que angulaire

Angular Material peut vous faire avancer loin dans votre développement… mais lorsque vous construisez quelque chose de complexe ou pour une entreprise, pensez à Kendo UI pour Angular.

Angular Material a récemment été mis à niveau pour s’aligner sur Material Design 3. Il s’agit d’un magnifique framework d’interface utilisateur qui contient les principaux outils d’interface utilisateur pour Angular. Il existe 36 composants, quatre thèmes de conception principaux et 21 primitives CDK pour créer des composants personnalisés. Il est riche en fonctionnalités et existe depuis la première version d’Angular 2. Il est classe et élégant, s’intégrant à Angular comme un gant. Mais est-ce suffisant ?

TL;DR

Angular Material UI est la bibliothèque de composants avec laquelle vous devriez commencer à créer votre application. Il suit strictement Material Design 3 et possède de nombreuses fonctionnalités personnalisables. Cependant, le progrès Interface utilisateur Kendo pour angulaire vous offre plus de puissance et de flexibilité pour créer des composants personnalisés dans le thème de votre choix. Une fois que votre application Angular est suffisamment grande, Kendo UI devrait figurer en haut de votre liste.

Choisir la saisie semi-automatique

J’ai étudié ce problème en testant un composant Angular Material et une interface utilisateur Kendo pour le composant Angular. Pourquoi ne pas simplement commencer par A… la saisie semi-automatique.

Composante Fondation

Le composant Autocomplete n’est pas vraiment un composant fondamental, car vous devez commencer par un champ de saisie puis un menu déroulant. Cependant, cela fonctionne parfaitement à des fins de test. Je veux quelque chose de complexe.

Installation

1. Créez une nouvelle application angulaire.

ng new kendo-angular

Je l’ai configuré avec ces réponses aux invites :

• CSS
• SSR facultatif (pas nécessaire pour cette application, donc je l’ai ignoré)
• Désactivez l’analyse angulaire (cela n’a pas d’importance dans les deux cas pour cet exemple)

2. Installez le matériau angulaire.

ng add @angular/material

• Choisissez un thème
• Les styles de typographie globale ne sont pas nécessaires pour cela
• Incluez des animations angulaires au cas où, mais pas nécessaire

3. Générez un nouveau composant.
   À l’aide de la CLI, générons un composant avec deux nouveaux composants :

ng generate component autocomplete
ng generate component kendo-autocomplete

4. Affichez l’application dans le composant principal de l’application.

// app.component.html
<div class="container">
  <app-autocomplete />
  <app-kendo-autocomplete />
</div>

<router-outlet />

5. Assurez-vous de les importer.

...
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    AutocompleteComponent,
    KendoAutocompleteComponent
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
...

6. Stylisez le conteneur pour un meilleur affichage.

// app.component.css

.container {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5rem;
}

Installation de l’interface utilisateur de Kendo

1. [If you plan to take this project live to production at some point, this step is useful to perform now—though you can skip to Step 3 if you’re just kicking the tires and don’t mind a watermark.] Obtenez un clé de licence et copie kendo-ui-license.txt dans votre dossier racine angulaire. N’oubliez pas de mettre ceci dans votre variable d’environnement pour la production.

2. Installez le module de licence NPM.

npm i @progress/kendo-licensing

Référencez le instructions de configuration pour plus de détails.

3. Ajoutez la liste déroulante Kendo.

ng add @progress/kendo-angular-dropdowns

4. Ajoutez le thème Material Nova à votre index.html fichier dans l’en-tête.

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/8.0.1/material/material-nova.css" />

Toute la configuration du code peut être trouvée :

Démo: Vercel
Dépôt : GitHub

Saisie semi-automatique des matériaux

Pour nous permettre de démarrer plus rapidement avec la saisie semi-automatique, j’ai utilisé l’exemple de modèle par défaut et je l’ai simplifié.

// autocomplete.component.html

<form class="example-form">
    <mat-form-field class="example-full-width">
        <mat-label>Assignee</mat-label>
        <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
            @for (option of filteredOptions | async; track option) {
            <mat-option [value]="option">{{option.name}}</mat-option>
            }
        </mat-autocomplete>
    </mat-form-field>
</form>

Je n’ai pas modifié le fichier du composant.

import { Component, OnInit } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { AsyncPipe } from '@angular/common';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

export interface User {
  name: string;
}


@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html',
  styleUrl: './autocomplete.component.css',
  standalone: true,
  imports: [
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
    AsyncPipe,
  ],
})
export class AutocompleteComponent implements OnInit {
  myControl = new FormControl<string | User>('');
  options: User[] = [{ name: 'Mary' }, { name: 'Shelley' }, { name: 'Igor' }];
  filteredOptions!: Observable<User[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => {
        const name = typeof value === 'string' ? value : value?.name;
        return name ? this._filter(name as string) : this.options.slice();
      }),
    );
  }

  displayFn(user: User): string {
    return user && user.name ? user.name : '';
  }

  private _filter(name: string): User[] {
    const filterValue = name.toLowerCase();

    return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
  }
}

Remplissage automatique de l’interface utilisateur de Kendo

1. Remplissons maintenant le composant kendo-autocomplete.

Nous allons utiliser ici la saisie semi-automatique de Kendo UI, ainsi qu’une étiquette Kendo UI. Remarquez que nous nous connectons areaList comme le data pour le composant kendo-autocomplete et en lui donnant également un espace réservé à afficher par défaut. Dans la prochaine étape, nous remplirons areaList et importez les packages Kendo UI dans ce composant.

<kendo-label text="Find restaurants in your area">
    <kendo-autocomplete [data]="areaList" placeholder="e.g. New York"></kendo-autocomplete>
</kendo-label>

2. Créez des données pour la saisie semi-automatique afin d’utiliser et d’importer les packages de composants Kendo UI

Dans le fichier TypeScript du composant, créons cela areaList tableau que nous venons d’utiliser dans le modèle et donnez-lui quelques données. Remarquez que j’ai également importé les DropDownsModule, InputsModule et ButtonsModule à partir de packages kendo-angular. Notre composant kendo-autocomplete qui utilise la saisie semi-automatique de Kendo UI devrait être prêt à être utilisé maintenant !

kendo-autocomplete.component.ts

import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LabelModule } from '@progress/kendo-angular-label';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
 
@Component({
  selector: 'app-kendo-autocomplete',
  standalone: true,
  imports: [
    LabelModule,
    FormsModule,
    InputsModule,
    ReactiveFormsModule,
    DropDownsModule,
    ButtonsModule
  ],
  templateUrl: './kendo-autocomplete.component.html',
  styleUrl: './kendo-autocomplete.component.css'
})
export class KendoAutocompleteComponent {
  public areaList: Array<string> = [
    "Amsterdam",
    "Athens",
    "Barcelona",
    "Berlin",
    "Brussels",
    "Chicago",
    "Copenhagen",
    "Dublin",
    "Helsinki",
    "Houston",
    "Lisbon",
    "London",
    "Los Angeles",
    "Madrid",
    "Miami",
    "Montreal",
    "New York",
    "Paris",
    "Philadelphia",
    "Prague",
    "Rome",
    "Sao Paulo",
    "Seattle",
    "Stockholm",
    "Toronto",
    "Vancouver",
    "Vienna",
    "Vienna",
    "Warsaw",
  ];
}

Les deux versions ont une apparence matérielle et des options pour les composants complexes.

Quand utiliser le matériel

1. Vous aimez l’un des quatre thèmes principaux.

2. Vous êtes doué pour créer votre propre thème avec le Guide de thématique angulaire.
3. Vous n’avez besoin que des fonctionnalités de saisie semi-automatique de base.

Ne vous méprenez pas, vous pouvez personnaliser Angular Material avec beaucoup de travail acharné, mais cela nécessite une personnalisation manuelle. Cela peut convenir à votre cas d’utilisation.

Quand utiliser l’interface utilisateur de Kendo

Sur les 46 catégories principales, il existe d’innombrables sous-catégories de composants avec 18 thèmes par défaut basés sur Material Design et Bootstrap. Plus important encore, vous pouvez créer vos propres thèmes à partir de Figma ou en utilisant le Générateur de thèmes Interface utilisateur. Vous n’êtes pas obligé de faire ces choses par programme.

Pensées

C’était mon premier essai avec Kendo UI pour Angular. Je pense que vous devriez utiliser Material UI pour les besoins de votre site Web angulaire. Cependant, une fois que ces besoins deviennent des besoins d’entreprise, vous voulez des modèles de conception communs et vous ne voulez pas modifier par programme les composants de Material UI, Kendo UI pour Angular est plutôt sympa.

Démo: Vercel
Dépôt : GitHub

N’oubliez pas : Kendo UI pour Angular est livré avec un essai gratuit de 30 jours. Essayez-le aujourd’hui !