Comment créer un élément angulaire personnalisé

Construisez un moteur de recherche gif à partir de zéro et regroupez-le avec un élément angulaire.

L'élément angulaire vous permet d'utiliser un composant angulaire en dehors de l'application angulaire. Il lie un composant pouvant être intégré à toute application Web en tant qu'élément personnalisé. L'élément personnalisé étend le code HTML en permettant de définir une balise dont le contenu est créé et contrôlé par JavaScript.

Nous allons construire un moteur de recherche GIF en tant qu'élément personnalisé. Cet élément personnalisé peut être utilisé dans n'importe quelle application Web.

1. Installation de Angular CLI 6 et initialisation du projet

npm install -g @ angular / cli
ng new ng6-element

2. Ajouter un élément angulaire

Pour utiliser la fonctionnalité d'élément, nous devons ajouter @ angular / elements en tant que dépendance dans notre projet.

ng add @ angular / elements

3. Créer un composant

Créons un composant simple. C'était semblable à notre composant régulier.

ng g c gif-engine

4. Style CSS utilisant Shadow DOM

Nous utilisons ViewEncapsulation.Native afin que tous nos fichiers CSS soient compilés en JavaScript et fournis avec des classes de composants et un modèle dans un seul fichier.

Le composant et les vues sont similaires à tous les autres composants angulaires.

Dans notre fichier gif-engine.component.ts

Dans notre fichier gif-engine.component.html

5. Enregistrement du composant sur app.module.ts

Ce processus comprend 3 étapes faciles

  1. Ajout de composant à entryComponents. Cela est nécessaire car notre composant GifEngineComponent ne fait partie d'aucun autre composant ou racine d'une application angulaire. Nous devons ajouter le composant dans entryComponents afin que le compilateur angulaire le compile.
  2. Nous avons ajouté la méthode ngDoBootstrap pour amorcer l'application manuellement.
  3. Appel de createCustomElement pour convertir notre architecture de composant en architecture DOM native. Ici, nous devons également spécifier le sélecteur pour notre élément personnalisé (‘gif-engine’ dans notre cas).

6. Supprimer app.component *

Comme nous démarrons manuellement l’application, nous n’avons plus besoin de notre composant app.component. Ce n'est pas une chose obligatoire. Mais cela réduira la taille de l'application. Comme nous travaillons avec des éléments personnalisés, il est recommandé de supprimer les éléments indésirables.

7. Construire l'application

Ajoutez à src / index.html et vous pouvez maintenant déboguer votre application par ng serve. Et vous pouvez créer la production finale en déclenchant cette commande.

ng build --prod --output-hashing = none

Cela générera 4 fichiers différents (runtime.js, polyfills.js, scripts.js et main.js) et nous voulons le distribuer sous forme de fichier unique. Faisons-le en utilisant un paquet de noeud appelé concat. Déclenchez cette commande dans le répertoire de votre projet.

npm install --save concat

créez un fichier concat-build.js sur le répertoire racine de votre projet et placez ce code

Mettre à jour package.json ajoute ce script.

"scripts": {
  "build: element": "ng build --prod --output-hashing = none && noeud ./concat-build.js"
}

Vous pouvez maintenant générer votre version de production en exécutant cette commande.

npm run build: element

Ajoutez les deux lignes de code ci-dessus sur n'importe quelle application Web… Terminé ..!

Notre application ressemblera à ceci après la construction.

Prise en charge du navigateur pour les éléments personnalisés

Prise en charge du navigateur lors de la rédaction de cet article. Vérifiez https://angular.io/guide/elements

Obtenez le dépôt GitHub ici

Conclusion

Je suis très excité par les éléments angulaires. Cela ouvrira la porte à de nombreuses possibilités. Avec ce développeur, vous pouvez créer de petits composants à usage unique et les utiliser sur n’importe quelle application Web existante.

Vous voulez en savoir plus sur l'élément angulaire ..? la conversation de Rob au ng-conf ici.