• 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
    Meilleures actions de jeux vidéo à acheter en mai

    Meilleures actions de jeux vidéo à acheter en mai

    APERÇU : Jeu vidéo Escape Academy

    APERÇU : Jeu vidéo Escape Academy

    Un général à la retraite quatre étoiles pense que les séquences de jeux vidéo sont le conflit Ukraine-Russie

    Un général à la retraite quatre étoiles pense que les séquences de jeux vidéo sont le conflit Ukraine-Russie

    Une société de jeux vidéo gagne du terrain dans le centre-ville de Saint-Louis |  Entreprise locale

    Une société de jeux vidéo gagne du terrain dans le centre-ville de Saint-Louis | Entreprise locale

    Revue du jeu vidéo – Evil Dead: The Game

    Revue du jeu vidéo – Evil Dead: The Game

    La plus grosse bête de la musique de jeu vidéo: Bear McCreary expliqué

    La plus grosse bête de la musique de jeu vidéo: Bear McCreary expliqué

    THE TEXAS CHAINSAW MASSACRE La bande-annonce du jeu vidéo montre des lieux de tournage recréés impressionnants – GeekTyrant

    THE TEXAS CHAINSAW MASSACRE La bande-annonce du jeu vidéo montre des lieux de tournage recréés impressionnants – GeekTyrant

    La nouvelle politique de confidentialité de Twitter est un mauvais jeu vidéo, Data Dash

    La nouvelle politique de confidentialité de Twitter est un mauvais jeu vidéo, Data Dash

    Bungie, Microsoft et d’autres réagissent à l’abrogation de Roe v. Wade

    Bungie, Microsoft et d’autres réagissent à l’abrogation de Roe v. Wade

  • Developpement web
    • All
    • Language HTML5
    OED et Urban League élargissent le programme de conception Web pour les petites entreprises et les étudiants issus de minorités

    OED et Urban League élargissent le programme de conception Web pour les petites entreprises et les étudiants issus de minorités

    Nicolas Birkel |  Avis de décès |  columbustelegram.com

    Nicolas Birkel | Avis de décès | columbustelegram.com

    Résistance à la fatigue des alliages Al-Si imprimés en 3D

    Résistance à la fatigue des alliages Al-Si imprimés en 3D

    Créez et déployez votre premier tableau de bord en temps réel avec Streamlit

    Créez et déployez votre premier tableau de bord en temps réel avec Streamlit

    Le 21e bal du maire annuel recueille plus de 1,3 million de dollars au profit de United Way Miami

    Le 21e bal du maire annuel recueille plus de 1,3 million de dollars au profit de United Way Miami

    pourquoi puis-je entrer dans votre immeuble – mais votre site Web me montre la porte?

    pourquoi puis-je entrer dans votre immeuble – mais votre site Web me montre la porte?

    EDC lance Tech Accelerator Training Initiative, premier cours en HTML, CSS, JavaScript

    EDC lance Tech Accelerator Training Initiative, premier cours en HTML, CSS, JavaScript

    Les Sœurs de Saint François célèbrent la Nuit franciscaine avec une couverture de roses – Delco Times

    Les Sœurs de Saint François célèbrent la Nuit franciscaine avec une couverture de roses – Delco Times

    Photos: début du printemps du Collège de St. Scholastica – Duluth News Tribune

    Photos: début du printemps du Collège de St. Scholastica – Duluth News Tribune

  • Astuces
    Revue Squarespace 2022 : fonctionnalités, prix et plus

    SiteGround Review 2022 : fonctionnalités, prix et plus

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    Comment commencer à tester votre code WordPress avec le framework de test PHP Pest – WP Tavern

    Comment commencer à tester votre code WordPress avec le framework de test PHP Pest – WP Tavern

    Membership website builders vs membership platforms: What’s the difference?

    WordPress membership websites vs closed membership platforms: Which is better?

    Vulnérabilité d’exécution de code à distance du plugin WordPress Elementor

    Vulnérabilité d’exécution de code à distance du plugin WordPress Elementor

    Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    WordPress reconsidère la proposition WebP par défaut

    WordPress reconsidère la proposition WebP par défaut

    Comment créer une page de chronologie avec des blocs – WP Tavern

    Comment créer une page de chronologie avec des blocs – WP Tavern

    La communauté WordPress attribue la baisse de la part de marché aux problèmes de performances, à la complexité accrue et au retard du projet d’édition complète du site

    La communauté WordPress attribue la baisse de la part de marché aux problèmes de performances, à la complexité accrue et au retard du projet d’édition complète du site

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

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

Caleb by Caleb
juin 24, 2021
in Language HTML5
0 0
0
Création de directives d’attributs personnalisés dans Angular 11
338
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedin


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.

Example of the Title

Example description. Lorem Ipsum is simply dummy text of the printing and type..

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

Stay Connected

  • 81.2k Followers
  • 113k 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

    3475 shares
    Share 1390 Tweet 869
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    867 shares
    Share 347 Tweet 217
  • Battle.net s’est remis d’une attaque DDoS, selon Blizzard

    486 shares
    Share 194 Tweet 122
  • Podcast : « Personnages, mensonges et transactions » Le jeu : un portrait de Scott Morrison #TransitZone

    416 shares
    Share 166 Tweet 104
  • 2 façons d’installer le serveur LAMP sur Ubuntu 22.04 | 20.04

    394 shares
    Share 158 Tweet 99

Follow Our Page

Ajouter votre lien ici

Example of the Title

Follow Us

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

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

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies

Recent News

Revue Squarespace 2022 : fonctionnalités, prix et plus

SiteGround Review 2022 : fonctionnalités, prix et plus

mai 20, 2022
Les enseignants des écoles interdits d’utiliser des téléphones portables pendant les heures de cours

Les enseignants des écoles interdits d’utiliser des téléphones portables pendant les heures de cours

mai 20, 2022

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

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

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

Welcome Back!

Sign In with Facebook
Sign In with Google
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.