• About
  • Advertise
  • Privacy & Policy
  • Contact
Tech News, Magazine & Review WordPress Theme 2017
  • ACCUEIL
  • TECHNOLOGIES
    Score Consulting rejoint le groupe de conseil et de technologie Conclusion

    Score Consulting rejoint le groupe de conseil et de technologie Conclusion

    Horizon Technology Finance accorde un prêt à capital-risque de 40 millions de dollars à Elligo Health Research

    Marvell Technology, Inc. (NASDAQ : MRVL) Les avoirs sont réduits par le système de retraite des enseignants du Texas

    Marvell Technology, Inc. (NASDAQ : MRVL) Les avoirs sont réduits par le système de retraite des enseignants du Texas

    La semaine de la technologie, du 2 au 6 octobre 2023

    La semaine de la technologie, du 2 au 6 octobre 2023

    Israël envisage la technologie blockchain pour réorganiser le secteur immobilier – Cryptopolitan

    Israël envisage la technologie blockchain pour réorganiser le secteur immobilier – Cryptopolitan

    Ford va utiliser la technologie des batteries chinoises, GM veut qu’elle soit bloquée – MishTalk

    Ford va utiliser la technologie des batteries chinoises, GM veut qu’elle soit bloquée – MishTalk

  • PORTRAIT
    Le photographe Sacha Stejko remporte des prix prestigieux avec une série de portraits – Campaign Brief NZ

    Le photographe Sacha Stejko remporte des prix prestigieux avec une série de portraits – Campaign Brief NZ

    Les voix et les votes des femmes occupent une place importante alors que le pape ouvre la réunion du Vatican sur l’avenir de l’Église

    Les voix et les votes des femmes occupent une place importante alors que le pape ouvre la réunion du Vatican sur l’avenir de l’Église

    Face-à-face portrait entre iPhone 15 Pro Max et Galaxy S23 Ultra : quel téléphone gagne ?

    Face-à-face portrait entre iPhone 15 Pro Max et Galaxy S23 Ultra : quel téléphone gagne ?

    Comment utiliser le portrait d’un garçon dans Lies Of P

    Comment utiliser le portrait d’un garçon dans Lies Of P

    2,5 étoiles pour le film, “I Killed Bapu” dresse un portrait nuancé d’un homme qui se situe à cheval sur la frontière entre héros et méchant

    2,5 étoiles pour le film, “I Killed Bapu” dresse un portrait nuancé d’un homme qui se situe à cheval sur la frontière entre héros et méchant

    Pourquoi l’iPhone a-t-il autant de succès ?  C’est simple

    Pourquoi l’iPhone a-t-il autant de succès ? C’est simple

  • JEUX
    Test FC 24 : Pourquoi devriez-vous acheter le nouveau jeu vidéo de football d’EA Sports

    Test FC 24 : Pourquoi devriez-vous acheter le nouveau jeu vidéo de football d’EA Sports

    L’équipe d’esports de Taiwan remporte la médaille de bronze lors de l’événement PUBG Mobile

    L’équipe d’esports de Taiwan remporte la médaille de bronze lors de l’événement PUBG Mobile

    Revue du jeu vidéo : Disgaea 7 : Vœux des sans-vertu

    Revue du jeu vidéo : Disgaea 7 : Vœux des sans-vertu

    25 meilleures extensions DLC de jeux vidéo, classées

    25 meilleures extensions DLC de jeux vidéo, classées

    C’est parti !  Les 10 principales tendances du jeu vidéo en 2024

    C’est parti ! Les 10 principales tendances du jeu vidéo en 2024

    72,5 % des grands studios de jeux vidéo adoptent le jeu Web3

    72,5 % des grands studios de jeux vidéo adoptent le jeu Web3

  • TUTORIELS
    • All
    • HTML5 / CSS3
    • PHP / MySql
    • Python
    Producteur numérique – Conseils aux consommateurs chez US News & World Report

    Producteur numérique – Conseils aux consommateurs chez US News & World Report

    Thème réactif WordPress WooCommerce pour pharmacie

    Thème réactif WordPress WooCommerce pour pharmacie

    Développeur logiciel (développeur C#.NET) chez Ntice Search

    Développeur logiciel (développeur C#.NET) chez Ntice Search

    Vulnérabilité du plugin WordPress Metform Elementor Contact Form Builder

    Vulnérabilité du plugin WordPress Metform Elementor Contact Form Builder

    EvnTalk – Thème WordPress pour conférence événementielle

    EvnTalk – Thème WordPress pour conférence événementielle

    10 langues à apprendre pour le développement de sites Web

    10 langues à apprendre pour le développement de sites Web

    Trending Tags

    • Best iPhone 7 deals
    • Apple Watch 2
    • Nintendo Switch
    • CES 2017
    • Playstation 4 Pro
    • iOS 10
    • iPhone 7
    • Sillicon Valley
  • MOBILES
    Les Américains dépensent toujours comme s’il n’y avait pas de lendemain

    Les Américains dépensent toujours comme s’il n’y avait pas de lendemain

    Deux femmes mettent en scène un drame d’accident et s’échappent avec le téléphone portable du conducteur

    Deux femmes mettent en scène un drame d’accident et s’échappent avec le téléphone portable du conducteur

    UN INNOVATEUR DE VACCINS DU DAKOTA DU SUD UTILISANT UNE TECHNOLOGIE DE PLATE-FORME APPROUVÉE PAR L’USDA POUR DÉVELOPPER DES OPTIONS DE VACCINS NÉCESSAIRES D’URGENCE POUR L’INDUSTRIE DE LA VOLAILLE

    Le marché des modules de caméra pour téléphones mobiles devrait croître à un rythme beaucoup plus rapide au cours des années à venir 2023-2029

    Une société de téléphonie mobile fait appel du refus du conseil de Sheffield concernant le mât téléphonique 5G

    Une société de téléphonie mobile fait appel du refus du conseil de Sheffield concernant le mât téléphonique 5G

    Dish hanté par le fondateur de Boost Mobile dans la guerre des téléphones prépayés

    Dish hanté par le fondateur de Boost Mobile dans la guerre des téléphones prépayés

    Pourquoi de nombreuses personnes dans le Missouri éteignent leur téléphone portable le 4 octobre

    Pourquoi de nombreuses personnes dans le Missouri éteignent leur téléphone portable le 4 octobre

  • CONTACT
No Result
View All Result
  • ACCUEIL
  • TECHNOLOGIES
    Score Consulting rejoint le groupe de conseil et de technologie Conclusion

    Score Consulting rejoint le groupe de conseil et de technologie Conclusion

    Horizon Technology Finance accorde un prêt à capital-risque de 40 millions de dollars à Elligo Health Research

    Marvell Technology, Inc. (NASDAQ : MRVL) Les avoirs sont réduits par le système de retraite des enseignants du Texas

    Marvell Technology, Inc. (NASDAQ : MRVL) Les avoirs sont réduits par le système de retraite des enseignants du Texas

    La semaine de la technologie, du 2 au 6 octobre 2023

    La semaine de la technologie, du 2 au 6 octobre 2023

    Israël envisage la technologie blockchain pour réorganiser le secteur immobilier – Cryptopolitan

    Israël envisage la technologie blockchain pour réorganiser le secteur immobilier – Cryptopolitan

    Ford va utiliser la technologie des batteries chinoises, GM veut qu’elle soit bloquée – MishTalk

    Ford va utiliser la technologie des batteries chinoises, GM veut qu’elle soit bloquée – MishTalk

  • PORTRAIT
    Le photographe Sacha Stejko remporte des prix prestigieux avec une série de portraits – Campaign Brief NZ

    Le photographe Sacha Stejko remporte des prix prestigieux avec une série de portraits – Campaign Brief NZ

    Les voix et les votes des femmes occupent une place importante alors que le pape ouvre la réunion du Vatican sur l’avenir de l’Église

    Les voix et les votes des femmes occupent une place importante alors que le pape ouvre la réunion du Vatican sur l’avenir de l’Église

    Face-à-face portrait entre iPhone 15 Pro Max et Galaxy S23 Ultra : quel téléphone gagne ?

    Face-à-face portrait entre iPhone 15 Pro Max et Galaxy S23 Ultra : quel téléphone gagne ?

    Comment utiliser le portrait d’un garçon dans Lies Of P

    Comment utiliser le portrait d’un garçon dans Lies Of P

    2,5 étoiles pour le film, “I Killed Bapu” dresse un portrait nuancé d’un homme qui se situe à cheval sur la frontière entre héros et méchant

    2,5 étoiles pour le film, “I Killed Bapu” dresse un portrait nuancé d’un homme qui se situe à cheval sur la frontière entre héros et méchant

    Pourquoi l’iPhone a-t-il autant de succès ?  C’est simple

    Pourquoi l’iPhone a-t-il autant de succès ? C’est simple

  • JEUX
    Test FC 24 : Pourquoi devriez-vous acheter le nouveau jeu vidéo de football d’EA Sports

    Test FC 24 : Pourquoi devriez-vous acheter le nouveau jeu vidéo de football d’EA Sports

    L’équipe d’esports de Taiwan remporte la médaille de bronze lors de l’événement PUBG Mobile

    L’équipe d’esports de Taiwan remporte la médaille de bronze lors de l’événement PUBG Mobile

    Revue du jeu vidéo : Disgaea 7 : Vœux des sans-vertu

    Revue du jeu vidéo : Disgaea 7 : Vœux des sans-vertu

    25 meilleures extensions DLC de jeux vidéo, classées

    25 meilleures extensions DLC de jeux vidéo, classées

    C’est parti !  Les 10 principales tendances du jeu vidéo en 2024

    C’est parti ! Les 10 principales tendances du jeu vidéo en 2024

    72,5 % des grands studios de jeux vidéo adoptent le jeu Web3

    72,5 % des grands studios de jeux vidéo adoptent le jeu Web3

  • TUTORIELS
    • All
    • HTML5 / CSS3
    • PHP / MySql
    • Python
    Producteur numérique – Conseils aux consommateurs chez US News & World Report

    Producteur numérique – Conseils aux consommateurs chez US News & World Report

    Thème réactif WordPress WooCommerce pour pharmacie

    Thème réactif WordPress WooCommerce pour pharmacie

    Développeur logiciel (développeur C#.NET) chez Ntice Search

    Développeur logiciel (développeur C#.NET) chez Ntice Search

    Vulnérabilité du plugin WordPress Metform Elementor Contact Form Builder

    Vulnérabilité du plugin WordPress Metform Elementor Contact Form Builder

    EvnTalk – Thème WordPress pour conférence événementielle

    EvnTalk – Thème WordPress pour conférence événementielle

    10 langues à apprendre pour le développement de sites Web

    10 langues à apprendre pour le développement de sites Web

    Trending Tags

    • Best iPhone 7 deals
    • Apple Watch 2
    • Nintendo Switch
    • CES 2017
    • Playstation 4 Pro
    • iOS 10
    • iPhone 7
    • Sillicon Valley
  • MOBILES
    Les Américains dépensent toujours comme s’il n’y avait pas de lendemain

    Les Américains dépensent toujours comme s’il n’y avait pas de lendemain

    Deux femmes mettent en scène un drame d’accident et s’échappent avec le téléphone portable du conducteur

    Deux femmes mettent en scène un drame d’accident et s’échappent avec le téléphone portable du conducteur

    UN INNOVATEUR DE VACCINS DU DAKOTA DU SUD UTILISANT UNE TECHNOLOGIE DE PLATE-FORME APPROUVÉE PAR L’USDA POUR DÉVELOPPER DES OPTIONS DE VACCINS NÉCESSAIRES D’URGENCE POUR L’INDUSTRIE DE LA VOLAILLE

    Le marché des modules de caméra pour téléphones mobiles devrait croître à un rythme beaucoup plus rapide au cours des années à venir 2023-2029

    Une société de téléphonie mobile fait appel du refus du conseil de Sheffield concernant le mât téléphonique 5G

    Une société de téléphonie mobile fait appel du refus du conseil de Sheffield concernant le mât téléphonique 5G

    Dish hanté par le fondateur de Boost Mobile dans la guerre des téléphones prépayés

    Dish hanté par le fondateur de Boost Mobile dans la guerre des téléphones prépayés

    Pourquoi de nombreuses personnes dans le Missouri éteignent leur téléphone portable le 4 octobre

    Pourquoi de nombreuses personnes dans le Missouri éteignent leur téléphone portable le 4 octobre

  • CONTACT
No Result
View All Result
Technique de pointe
No Result
View All Result
Home Générale

Création de directives d’attributs personnalisés dans Angular 11

Caleb by Caleb
juin 24, 2021
153
Création de directives d’attributs personnalisés dans Angular 11
Share on FacebookShare on Twitter


Les directives sont des classes qui ajoutent un comportement supplémentaire aux éléments de vos applications angulaires. Les directives angulaires peuvent aider à gérer de nombreux aspects du DOM, notamment les formulaires, les listes, les styles et bien d’autres. Angular comprend plusieurs directives intégrées et vous pouvez définir la vôtre pour associer un comportement personnalisé aux éléments du DOM. Dans ce didacticiel, nous allons apprendre à créer et à utiliser une directive d’attribut pour que les éléments DIV se comportent comme un bouton ou un lien.

Le monde des directives

À la base, les directives sont des fonctions qui s’exécutent chaque fois que le compilateur angulaire les trouve dans le DOM. Leur but est d’étendre la puissance du HTML en lui donnant une nouvelle syntaxe et de nouvelles fonctionnalités. Angular utilise trois types de directives comme suit :

  1. Composants sont en fait des directives avec des modèles. Sous les couvertures, ils utilisent la directive API et nous donnent un moyen plus propre de les définir.

Les deux autres types de directives n’ont pas de modèles. Au lieu de cela, ils sont spécifiquement adaptés à la manipulation DOM.

  1. Directives d’attribut manipuler le DOM en modifiant son comportement et son apparence. Nous pouvons utiliser des directives d’attribut pour appliquer un style conditionnel aux éléments, afficher ou masquer des éléments ou modifier dynamiquement le comportement d’un composant en fonction d’une propriété changeante. Les directives d’attributs intégrées incluent NgClass, NgStyle, et NgModèle.
  2. Directives structurelles sont spécialement conçus pour créer et détruire des éléments DOM. Certaines directives d’attribut, telles que caché, qui affiche ou masque un élément, ne modifie pas le DOM mais régit l’apparence d’un élément. Les directives structurelles angulaires ont tendance à être beaucoup moins adaptées au DOM, car elles ajoutent ou suppriment complètement des éléments du DOM. En raison de leur nature potentiellement destructrice, vous devez être très prudent lorsque vous les utilisez.

Générer une nouvelle directive

L’Angular CLI a une commande pour créer une directive comme suit :

ng g directive buttonize

L’instruction ci-dessus générera deux fichiers : bouton.directive.ts et le bouton.directive.spec.ts fichier d’essai. Il ajoutera notre nouvelle directive à app.module.ts ainsi que:

import { ButtonizeDirective } from './buttonize.directive';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [
    AppComponent,
    ButtonizeDirective
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Codage de la directive Buttonize

Au minimum, le fichier .ts de la directive contiendra le @Directif() décorateur qui définit la propriété selector telle qu’elle apparaîtra dans les fichiers modèles, ainsi qu’un constructeur vide :

import { Directive } from '@angular/core';

@Directive({
  selector: '[buttonize]'
})

export class ButtonizeDirective {

  constructor() { }

}

Ajout de notre logique personnalisée

Notre directive nécessitera deux options par défaut : la tabindex et rôle, qui sont définis sur 0 et ’bouton’ respectivement:

const DEFAULT_OPTIONS = {
    tabindex: 0,
    role: 'button'
};

Celles-ci peuvent être remplacées en fournissant des options à notre directive. Pour ce faire, nous allons ajouter une propriété d’entrée nommée de la même manière que notre directive. De cette façon, nous pouvons fournir des options en affectant un objet directement à notre directive dans le modèle comme ceci :

[buttonize]="{tabindex: -1}"

Les options seront définies via le @HostBinding décorateur. Il marque une propriété DOM en tant que propriété de liaison à l’hôte et fournit des métadonnées de configuration. Angular vérifie automatiquement les liaisons des propriétés de l’hôte lors de la détection des modifications, et si une liaison change, elle met à jour l’élément hôte de la directive.

Dans le ngOnInit événement, nous utiliserons la statique Objet.assign() méthode pour définir les options de notre directive. le Objet.assign() la méthode copie tout propre énumérable propriétés d’un ou plusieurs objets source vers un objet cible et renvoie l’objet cible modifié. Voici le code de cette partie :

export class ButtonizeDirective implements OnInit {
    @Input('buttonize')
    public options: any = {};

    @HostBinding('tabindex')
    public tabindex: number;

    @HostBinding('attr.role')
    public role: string;

    constructor() { }

    public ngOnInit(): void {
        this.options = Object.assign({}, DEFAULT_OPTIONS, this.options);
        this.tabindex = this.options.tabindex;
        this.role = this.options.role;
    }
    
    //...
}

Vous pouvez voir la valeur par défaut tabindex et rôle dans l’inspecteur d’éléments du navigateur :

Angular-Browser-Inspector-Element

Manipulation des pressions de touches en angulaire

Il ne reste plus qu’à capturer les pressions sur les touches et à convertir les touches Entrée en clics. Pour ce faire, nous pouvons utiliser le décorateur @HostListener et écouter spécifiquement le ‘keyup.enter’ un événement. Nous devrions également passer dans le Événement de clavier afin que nous puissions l’empêcher de bouillonner jusqu’aux éléments parents. Enfin, nous invoquons le Cliquez sur() méthode sur le ElementRef qui a été injecté via le constructeur :

constructor(protected eleRef: ElementRef) { }

@HostListener('keyup.enter', ["$event"])
public onEnterKeyUp(event: KeyboardEvent): void {
    event.stopPropagation();
    //trigger a mouse click event on a specific HTML element
    this.eleRef.nativeElement.click();
}

Remplacement des options par défaut

Bien que nous ayons déjà fait allusion aux options par défaut, nous n’avons pas vraiment vu d’exemple de substitution d’options en action. En voici un qui définit le tabindex à -1 et attribue un rôle de ‘lien’ :

<span [buttonize]="{tabindex: -1, role: 'link'}" (click)="goToComponent(element)">

Cela aurait pour effet de rendre l’élément SPAN inaccessible via la touche TAB, ce qui serait utile si l’on voulait substituer une autre touche de navigation. Le rôle de lien est utilisé pour identifier un élément qui crée un lien hypertexte vers une ressource qui pourrait être au sein de l’application ou externe. Les lecteurs d’écran et autres technologies d’assistance reposent sur le rôle attribut pour identifier le but et l’utilisation d’un élément.

La démo

Vous trouverez la démo de la leçon d’aujourd’hui sur stackblitz.com. Il contient deux utilisations de la directive buttonize : transformer un DIV en bouton et un autre en lien. Dans les deux cas, l’appui sur la touche Entrée déclenche le gestionnaire de clics. Le « lien » a également un tabindex de -1 afin qu’il ne puisse pas être focalisé via la navigation au clavier. Voici le balisage HTML :

<h2>Attribute Directive Demo</h2>

<h4>Presto, the following DIV is now a button!</h4>
<div buttonize class="buttonlink" (click)="onClick()">Click Me!</div>

<br/>

<h4>Presto, the following DIV is now a link!</h4>
<div class="link" [buttonize]="{tabindex: -1, role: 'link'}" (click)="onClick()">Click Me!</div>
<p>(Notice that you cannot TAB to it.)</p>

Invoqué par clic et Entrée KeyUP événements, le sur clic() le gestionnaire affiche simplement et une boîte d’alerte :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {

  onClick() {
    alert("Thanks for clicking!");
  }
}

Conclusion

Dans l’article d’aujourd’hui, nous avons vu comment les directives angulaires sont des fonctions qui étendent la puissance du HTML en lui donnant une nouvelle syntaxe et de nouvelles fonctionnalités. Maintenant que vous savez comment créer une directive d’attribut, je ne doute pas que vous en trouverez de nombreuses utilisations dans vos propres applications.

— to www.htmlgoodies.com

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

Unsubscribe
Caleb

Caleb

Recommended.

Biobohemia fait avancer la technologie d’essence antigénique dans un papier publié

Biobohemia fait avancer la technologie d’essence antigénique dans un papier publié

mai 10, 2022
Session Replay amélioré pour les applications déployées en continu: capture de fichiers CSS

This was H1 2022: Part 2 – Cyber War

août 13, 2022

Subscribe.

Trending.

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

décembre 24, 2021
Comment créer une calculatrice simple à l’aide de HTML, CSS et JavaScript

Comment créer une calculatrice simple à l’aide de HTML, CSS et JavaScript

juin 19, 2022
Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

mai 15, 2022
Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

novembre 25, 2021
Avantages et inconvénients des concepteurs et créateurs de jeux vidéo

Avantages et inconvénients des concepteurs et créateurs de jeux vidéo

septembre 17, 2021
Technique de pointe

We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

Follow Us

Catégories

  • Générale
  • HTML5 / CSS3
  • JEUX VIDEO
  • MOBILES
  • PHP / MySql
  • portrait
  • PROGRAMMATION WEB
  • Python
  • TECHNOLOGIES

Étiquettes

actualité économique ailette AMERS ASIE ASXPAC BACT CMPNY Commerce courrier quotidien CYCS CYCS08 des sports Divertissement EMRG Entreprise GEN Google Inc. intelligence artificielle ITSE ITSE08 jeu vidéo jeux vidéo Kotaku l'informatique l'Internet La technologie Logiciel Microsoft mobile MTPIX NOM nous nouvelles politique portrait SOFW SWIT TECH08 technologie TMT TOPCMB TOPNWS Éducation économie

Recent News

Producteur numérique – Conseils aux consommateurs chez US News & World Report

Producteur numérique – Conseils aux consommateurs chez US News & World Report

octobre 3, 2023
Score Consulting rejoint le groupe de conseil et de technologie Conclusion

Score Consulting rejoint le groupe de conseil et de technologie Conclusion

octobre 3, 2023
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Accueil
  • TECHNOLOGIES
  • PORTRAIT
  • JEUX VIDEO
  • TUTORIELS
  • MOBILES
  • Nous Contacter

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

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

Add New Playlist