• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Le sketch Mario SNL de Pedro Pascal est l’adaptation du jeu vidéo dont nous avons plus que jamais besoin

    Le sketch Mario SNL de Pedro Pascal est l’adaptation du jeu vidéo dont nous avons plus que jamais besoin

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Quelle est la durée idéale d’un jeu vidéo ?  –

    Quelle est la durée idéale d’un jeu vidéo ? –

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    L’industrie écossaise du jeu vidéo renforce le potentiel des jeux

    Rencontrez les régulateurs : les normes de sécurité pour les enfants auront de nouveaux régulateurs à partir de 2023

    Wesfarmers supprime 100 emplois chez Catch

    Wesfarmers supprime 100 emplois chez Catch

    Arrêtez d’appeler les langages de programmation HTML et CSS |  de Christophe Lam |  L’Albatros FOSS |  février 2023

    Arrêtez d’appeler les langages de programmation HTML et CSS | de Christophe Lam | L’Albatros FOSS | février 2023

    Vous voulez devenir UI/UX Designer ?  Consulter la liste des stages

    Vous voulez devenir UI/UX Designer ? Consulter la liste des stages

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière |  Nouvelles de Bombay

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière | Nouvelles de Bombay

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

  • Astuces
    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    6 Best WordPress SEO Plugins for 2023

    6 Best WordPress SEO Plugins for 2023

    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Developpement web Language HTML5

Convertir des éléments HTML en composants angulaires

Caleb by Caleb
juin 25, 2021
in Language HTML5
0
0
Convertir des éléments HTML en composants angulaires
333
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram


De nombreux langages de programmation modernes, tels que Java et Python, sont orientés objet (OO). D’autres sont événementiels. Angular, d’autre part, étant un Framework, suit son propre modèle, utilisant une architecture basée sur des composants. Nous entendons par là qu’une application Angular est composée de nombreux blocs réutilisables appelés Composants. Chacun est composé de plusieurs fichiers, qui incluent un fichier de classe .ts, un modèle .html et peut-être un fichier de test .css et spec.ts. L’idée derrière l’architecture basée sur les composants d’Angular est solide ; en construisant des pièces réutilisables, nos applications peuvent réduire considérablement le nombre de doublons.

Dans de nombreux cas, nous pouvons planifier les pièces à transformer en composants. D’autres fois, nous réalisons que nous aurons besoin de fonctionnalités similaires à quelques endroits de notre application. Et c’est le sujet du tutoriel : comment extraire le TypeScript, HTML et CSS que nous devons répliquer et comment tout compartimenter dans un nouveau composant. En raison des règles de portée imposées par Angular, quoi laisser et quoi retirer peut être une question difficile à répondre. Comme étude de cas, nous prendrons le menu déroulant personnalisé que nous avons implémenté dans le Basculement de la visibilité des éléments dans Angular 11 avec NgClass article et en faire un composant afin que nous puissions le réutiliser plus tard.

Échanger le menu déroulant existant avec notre nouveau composant

Il est généralement préférable d’éviter de tout faire en même temps ; cela produira probablement beaucoup de bogues qui seront difficiles à traquer. Au lieu de cela, abordez la tâche en utilisant des petits pas en créant votre nouveau composant et en remplaçant le ou les éléments existants par celui-ci.

En utilisant la CLI angulaire, la commande serait :

ng g c shared/components/dropdown-menu

Le “cg” est l’abréviation de “Generate Component”, donc, tant que vous savez ce que vous tapez, c’est bien d’utiliser la forme courte. La commande ci-dessus placera notre nouveau composant de menu déroulant sous « srcappsharedcomponentsmenu déroulant”:

Éléments HTML en angulaire

Une fois notre composant en place, nous sommes prêts à l’insérer dans notre modèle. Pour ce faire, nous allons simplement commenter le balisage en question et ajouter le composant de menu déroulant :

<mat-toolbar color="primary">
  <a [routerLink]="['/']">Home</a>  
  <a [routerLink]="['/survey']">Survey</a>  
  <div class="menu-container" 
    (click)="menuOpened = true" (mouseenter)="menuOpened = true" (mouseleave)="menuOpened = false">
    <span>Menu</span>
    <dropdown-menu [ngClass]="{ 'menu-opened': menuOpened }" class="dropdown-menu"></dropdown-menu>
    <!--
    <div [ngClass]="{ 'menu-opened': menuOpened }" class="dropdown-menu">
        <a *ngFor="let ic of investmentClasses" (click)="onClick($event)">
            <mat-icon mat-list-icon>{{ ic.icon }}</mat-icon>
            <span class="dropdown-menu-item">{{ ic.text }}</span>
        </a>
    </div> 
    -->
  </div>
</mat-toolbar>
  
<div class="container">
  <router-outlet></router-outlet>
</div>

Pour styliser notre nouveau composant comme le ou les éléments que nous remplaçons, nous pouvons copier la classe “menu déroulant”. Par défaut, le menu déroulant affiche « aucun », nous devons donc également nous déplacer sur le ngClass. Cela changera la propriété d’affichage en « flex » sur l’événement de survol du DIV du conteneur de menu :

Menu déroulant angulaire

Communiquer avec notre nouveau composant

Le plus grand défi lors de l’introduction d’un nouveau composant dans un modèle est la transmission de données entre le composant parent et enfant. Dans notre cas, les données doivent voyager dans les deux sens : le menu déroulant doit savoir quels éléments afficher et le parent doit être informé de la sélection de l’utilisateur.

Commençons par définir les éléments du menu déroulant.

Dans Angular, le moyen de transmettre des données directement à un composant consiste à utiliser un décorateur @Input(). En ajoutant [menuItems]="investmentClasses" à la balise de menu déroulant, la variable d’entrée menuItems de notre composant sera définie sur les classes d’investissement de l’AppComponent.

Dans le DropdownMenuComponent, nous devons maintenant ajouter la variable menuItems :

export class DropdownMenuComponent {
  @Input() public menuItems: Array<MenuItem> = [];
  //...
}

Nous voulons que les menuItems aient un format très spécifique afin que les propriétés ne manquent pas dans le modèle. Pour ce faire, nous pouvons définir l’interface MenuItem :

export interface MenuItem {
  icon: string;
  id: string;
  value: string,
}

L’interface MenuItem est exportée à partir de DropdownMenuComponent afin qu’elle puisse être utilisée par AppComponent (bien que cela ne soit pas strictement nécessaire, tant que les propriétés de l’élément correspondent) :

import { MenuItem } from "./shared/components/dropdown-menu/dropdown-menu.component";

export class AppComponent {
  public menuOpened = false;
  public investmentClasses: MenuItem[] = [
     {
       icon: "euro_symbol",
       value: "currencies",
       id: "currency"
     },
     //...
  ];
}

Notifier le parent de la sélection de l’utilisateur

Tout comme le décorateur @Input() accepte les données du composant parent, l’analogue @Output() émet des données vers le parent. Pour cette raison, il doit être instancié dans une nouvelle instance EventEmitter :

export class DropdownMenuComponent {
  @Input()  public menuItems: Array<MenuItem> = [];
  @Output() public itemSelected = new EventEmitter<number>();
  //...
}

Ce que vous choisissez d’émettre au parent dépend du format de données. Puisque nous utilisons un tableau, le moyen le plus simple d’accéder à un élément est via son index numérique. Un moyen simple de le faire est de l’ajouter à la boucle ngFor. Cela nous permet de le transmettre au gestionnaire d’événements onClick :

<a *ngFor="let mi of menuItems;let i = index" (click)="onClick($event, i)">

Nous pouvons maintenant émettre l’index vers le parent :

public onClick(event: MouseEvent, index: number) {
  event.stopPropagation();
  this.itemSelected.emit(index);
}

Pendant ce temps, dans le modèle du parent, nous pouvons ajouter un gestionnaire pour l’élément sélectionné comme suit :

(itemSelected)="onItemSelected($event)"

Voici le code de la méthode onItemSelected() qui montre comment récupérer l’élément investmentClasses pertinent :

public onItemSelected(index: number) {
  this.menuOpened = false;
  alert('Selected item: ' + this.investmentClasses[index].value);
}

Styliser le composant du menu déroulant

Pour maintenir une encapsulation de composant appropriée, toute classe définie dans le modèle du menu déroulant doit être déplacée dans son fichier .css :

a {
  text-decoration: none;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  padding: 0 0.8rem;
}

a:not(:last-child) {
  border-bottom: 2px solid gray;
}

a:hover {
  background-color: #a12f42;
}

.dropdown-menu-item {
  display: block;
  margin: 1.33rem 0rem;
  font-weight: bold;
}

La démo

Au codesandbox.io, vous trouverez la démo avec tout le code qui a été présenté dans cet article.

Conclusion

Chaque fois que vous avez besoin de réutiliser des éléments HTML dans différentes pages, ou même dans la même page, c’est le moment d’encapsuler ses fonctionnalités dans un composant personnalisé. Comme nous l’avons vu ici aujourd’hui, ce n’est pas si difficile; il suffit d’adopter une approche au coup par coup.

— to www.htmlgoodies.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5605 shares
    Share 2242 Tweet 1401
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1706 shares
    Share 682 Tweet 427
  • GOLDEN FARM BIZ: earn unlimited money online

    347 shares
    Share 139 Tweet 87
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    514 shares
    Share 206 Tweet 129
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    712 shares
    Share 285 Tweet 178

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Exposition I Dream a World de la National Portrait Gallery

février 6, 2023
L’industrie écossaise du jeu vidéo renforce le potentiel des jeux

Rencontrez les régulateurs : les normes de sécurité pour les enfants auront de nouveaux régulateurs à partir de 2023

février 6, 2023

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.