Clients 
 Créer un client 
 Connexion 



 

En ajoutant du style, voici à quoi ressemble la barre d'outils:

Pour créer une barre d'outils, utilisez le composant vous créez une ou plusieurs lignes dans la barre d'outils en utilisant le composant .

Notez que nous avons importé les modules MatToolbarModule et MatButtonModule de @ angular / material dans le material.module.ts .

Vous pouvez également utiliser d'autres éléments de navigation tels que menus et encadrés . Construction de l'interface utilisateur pour le composant de connexion

Après avoir créé l'interface utilisateur du composant racine de notre application, créons l'interface utilisateur du composant de connexion.

Ouvrir src / app / login / login.component.html et ajoutez le code HTML suivant. Ajoutez une carte Matériel angulaire pour contenir le formulaire de connexion:

     Connexion 

    
    
    

Un composant sert de conteneur à objet unique pour le texte, les photos et les actions. Trouvez plus de détails sur les cartes des documents .

Ensuite, dans la section "contenu" de la carte, ajoutez le formulaire HTML:

Ajoutons maintenant deux entrées pour obtenir le nom d'utilisateur et le mot de passe de l'utilisateur:

De nombreux composants de matériau angulaire doivent être enveloppés dans un composant pour avoir des styles de champs de texte communs tels que le soulignement, l'étiquette flottante et les messages d'indice.

Ce sont les composants qui sont conçu pour être enveloppé à l'intérieur :

Enfin, dans la section actions de la carte, ajoutons un bouton Matériau angulaire pour l'action de connexion:

     Connexion 

Pour créer un bouton Matériau angulaire, il suffit d'utiliser des éléments HTML et natifs et d'ajouter des attributs matériels tels que bouton mat et mat-raised-button . Pour plus de détails, consultez les documents

Voici à quoi ressemble le formulaire de connexion:

Si le login est réussi () : demo, password: demo ), l'utilisateur sera redirigé vers le composant CustomerList . Sinon, l'utilisateur recevra un message d'erreur: "Vos informations de connexion sont incorrectes!"

Créer la boîte de dialogue d'erreur modale

MatDialog peut être utilisé pour créer et ouvrir des boîtes de dialogue modales. La boîte de dialogue nécessite le chargement d'un composant, donc créez d'abord un composant Angular qui affiche le message d'erreur qui est passé.

Créez src / app / error.component.ts puis ajoutez le code suivant:

 import {Component, Inject, Injectable} à partir de '@ angular / core';

importer {MatDialogRef, MAT_DIALOG_DATA, MatDialog} à partir de '@ angular / material';

@Composant({
templateUrl: 'error.component.html'
})
classe d'exportation ErrorComponent {
    constructeur (private dialogRef: MatDialogRef @Inject (MAT_DIALOG_DATA) données publiques: any) {
    }
    public closeDialog () {
        this.dialogRef.close ();
    }
}

Ce composant sera créé et ouvert avec MatDialog afin qu'il puisse injecter MatDialogRef qui fournit un handle sur le dialogue ouvert et peut être utilisé pour fermer le dialogue et recevoir des notifications quand le dialogue se ferme. (La méthode closeDialog () utilise cette référence pour fermer la boîte de dialogue.)

Notre composant d'erreur a besoin d'un moyen d'afficher le message d'erreur pour l'utilisateur. (Le message sera transmis lorsque le composant est ouvert en utilisant la méthode ouverte MatDialog .) Vous pouvez accéder aux données dans votre composant de dialogue en utilisant le jeton d'injection MAT_DIALOG_DATA qui peut être importé de '@ angular / material' puis injecté dans le composant en utilisant @Inject () .

Ensuite, créez src / app / error.component.html et ajoutez le code suivant:

 Erreur 
 {{data.message}} 

 Ok 

Nous utilisons beaucoup de directives disponibles pour structurer les composants de dialogue:

• mat-dialog-title : utilisé pour le titre du dialogue, et doit être appliqué aux éléments de titre
  
  [19659112] etc.
• : utilisé pour le contenu défilant du dialogue
• : utilisé comme conteneur pour les actions de dialogue.

Suivant , ouvrez src / app / app.module.ts et ajoutez ce composant au module:

 @NgModule ({

déclarations: [

/*...*/
    ErrorComponent
],

importations: [/*...*/
],
entryComponents: [ErrorComponent],
/*...*/
})

classe d'exportation AppModule {}

Ajoutons maintenant la méthode login () (pour déclencher le dialogue d'erreur) au LoginComponent :

 import {Component, OnInit} de '@ angular / core' ;
importer {MatDialog, MatDialogRef} à partir de '@ angular / material';

/ * ... * /

@Composant({
/ * ... * /
})
classe d'exportation LoginComponent {

    nom d'utilisateur public: string = "";
    mot de passe public: string = "";


    constructeur (boîte de dialogue privée: MatDialog, routeur privé: Routeur) {}
    s'identifier(){
        if (this.username === "demo" && this.password === "demo")
        {
            this.router.navigate (['customer-list']);
        }
        autre
        {
            this.dialog.open (ErrorComponent, {data: {
            message: "Vos informations de connexion sont incorrectes!"
            }});
        }
    }
}

Nous injectons simplement le composant MatDialog et l'utilisons pour ouvrir une boîte de dialogue (si les informations d'identification de l'utilisateur ne sont pas correctes) avec le composant ErrorComponent et un objet config contenant les données sera passé. La méthode open () renvoie une instance de MatDialogRef .

Ceci est une capture d'écran du dialogue d'erreur:

Vous trouverez plus d'informations sur les boîtes de dialogue des documents .

Construction de l'interface utilisateur pour le composant CustomerList

Pour le composant CustomerList nous utiliserons différents Composants de matériau angulaire, le plus important:

Ouvrir src / app / customer-list / customer-list.component.html et ajouter le balisage suivant:

la classe mat-elevation-z8 est une classe d'élévation de matériau angulaire qui vous permet d'ajouter une séparation entre les éléments le long de l'axe z. Vous pouvez trouver plus de détails à partir de ce lien .

Ajout d'un spinner de chargement

Nous utilisons pour afficher un spinner lorsque des données sont encore en cours de chargement, que nous simulons en utilisant Fonction setTimeout () :

Si la variable de chargement équivaut à true la propriété d'affichage CSS reçoit la valeur du bloc . Sinon, il est assigné aucun ce qui le fait disparaître.

Vous devez ajouter une variable de chargement à la classe de composant, qui prend initialement une valeur de true . chargement = vrai;
    /*…*/
    constructeur () {}
ngOnInit (): void {

    setTimeout (() => {

        this.loading = faux;

    }, 2000);

    /*…*/

Ajout d'une table de données avec une source de données

Nous créons ensuite une table de données Material en utilisant qui s'affiche uniquement si en charge est égal à false :

La table de données prend une propriété dataSource utilisée pour fournir des données pour la table. Vous pouvez simplement passer un tableau de données à la table, mais pour les cas d'utilisation réels, vous devez utiliser une source de données avancée telle que MatTableDataSource fourni par Angular Material, qui encapsule la logique des opérations avancées telles que la pagination. , tri et filtrage:

 classe d'exportation CustomerListComponent implémente OnInit {

    clients: client [] = [
    { id:1, name:'Customer 001',job:'Programmer'},
    /*...*/
    ];

    dataSource = new MatTableDataSource  (this.customers);

Ajout de modèles de colonnes

Pour chaque définition de colonne, vous devez fournir un nom unique et le contenu de ses cellules d'en-tête et de ligne. Par exemple, il s'agit de la colonne permettant d'afficher l'ID client:

  CustomerId 
  {{customer.id}} 

Ceci est une simple définition de colonne avec le nom id . La cellule d'en-tête contient le texte CustomerId et chaque cellule de ligne restitue la propriété id des données de chaque ligne

De la même manière, vous pouvez ajouter les autres définitions de colonnes. 19659005] Pour la colonne des opérations, nous utilisons deux icônes du matériau angulaire: delete et edit enveloppé avec des boutons Material:

  Operations 

   delete 

   edit [19659148] Ajout de modèles de ligne 
 Après avoir défini les modèles de colonne, vous devez définir les modèles de ligne. Vous devez d'abord ajouter une variable contenant la liste des colonnes que vous avez dans le composant: 
 displayedColumns = ['id', 'name', 'job', 'operations'];

 Ensuite, vous devez ajouter   et   au contenu de votre   et fournir votre liste de colonnes en tant qu'entrées: 
   
 

 Vous pouvez ajouter une pagination à votre table de données en ajoutant simplement un composant   après : 
   

 L'un des avantages d'utiliser  MatTableDataSource  est que vous obtenez une pagination prête à l'emploi en fournissant simplement  MatPaginator  à votre source de données. 
 Commencez par importer le  MatPaginatorModule  dans  material.module.ts . Ensuite, vous devez obtenir la directive paginator: 
 @ViewChild (MatPaginator) paginator: MatPaginator;

 Enfin, vous passez simplement le paginateur à la source de données de la table: 
 ngAfterViewInit () {
    this.dataSource.paginator = this.paginator;
}

 Ajout de tri 
 En utilisant  MatTableDataSource vous pouvez également trier la boîte en ajoutant seulement quelques éléments. 
 Tout d'abord, assurez-vous d'avoir  MatSortModule  importé dans votre module ( material.module.ts ). 
 Ensuite, ajoutez la directive  matSort  au composant  puis ajoutez  mat-sort-header [19459018
 Par exemple, ajoutons un tri à la colonne  name : 
 
 Nom 
  {{customer.name}} 


 Enfin, vous devez fournir la directive  MatSort  à la source de données et elle aura automatiquement le tri: 
 import {MatTableDataSource, MatPaginator, MatSort} à partir de '@ angular / material';
/*...*/
la classe d'exportation CustomerListComponent implémente OnInit {

@ViewChild (MatSort) tri: MatSort;

ngAfterViewInit () {
    /*...*/
    this.dataSource.sort = this.sort;
}

 Vous pouvez également ajouter un filtrage et une sélection à votre tableau. Consultez les documentations   pour plus d'informations 
 En utilisant  MatTableDataSource  vous propose de nombreuses fonctionnalités intégrées prêtes à l'emploi, mais ne prend en charge que la pagination côté client. Pour la pagination côté serveur ou d'autres fonctions personnalisées, vous devez créer votre source de données personnalisées  . 
 Dans le cas d'une source de données personnalisée, vous devrez écouter les données du paginateur  ( page)  événement pour implémenter la pagination et l'événement  (matSortChange)  du tri pour implémenter le tri des données. 
 Ceci est une capture d'écran du composant  CustomerList : 
 
 Ajout de notifications SnackBar 
 Assurez-vous d'abord que vous avez importé  MatSnackBarModule  dans votre module. Ensuite, importez  MatSnackBar  dans votre composant, puis appelez simplement la méthode  open ()  de l'instance  MatSnackBar : 
 import {MatSnackBar} from ' @ angulaire / matière ';
/*...*/
constructeur (snackBar public: MatSnackBar) {}

deleteCustomer (id) {
    laissez snackBarRef = this.snackBar.open (`Suppression du client # $ {id}`);
}
editCustomer (id) {
    laissez snackBarRef = this.snackBar.open ("Editer le client # $ {id}");
}

 Construction de l'interface utilisateur pour le composant CustomerCreate 
 Pour le composant  CustomerCreate nous utiliserons un ensemble de composants de matériau angulaire, tels que: 

 le composant de carte () [19659009] le composant onglets (  et ) 
 le label () et l'entrée (  et ) composants 
 le champ de formulaire () composant [19659009] la case à cocher () composant 
 le sélecteur de date () composant 
 le bouton radio ( <mat-radio-bouton ) composant 
 le select ( ] 

 Ouvrez donc  src / app / client-create / client-create.component.html  et commencez par ajouter le composant de la carte contenant le formulaire de création du client: 


     Create Customer 


    
    
    
    
    
    


 Dans la section du contenu de la carte, ajoutons un formulaire HTML: 
  




 Ensuite, organisons les champs de formulaire en onglets horizontaux à l'aide des onglets Matériau angulaire. Dans l'élément de formulaire, ajoutez le code suivant pour créer deux onglets avec  Informations générales  et  Autres informations  étiquettes: 
  








 Dans chaque onglet, nous allons ajouter un tableau HTML pour organiser les champs de formulaire en cellules de tableau: 
  
    

 Ajoutez le contenu suivant pour le premier onglet. Dans la rangée / cellule du tableau, ajoutez un champ pour le nom du client: 

     Nom 
    


 Ensuite, créez une entrée pour l'adresse du client: 

     Adresse 
     


 Enfin, créez un champ de saisie pour l'email du client: 

     Email 
    


 Nous utilisons  pour créer des étiquettes,   pour créer un champ de saisie, et  pour créer un champ de zone de texte. 
 Pour le deuxième onglet, ajoutez le contenu suivant. Dans la première rangée / cellule de la table, ajoutez la  Est-ce que la compagnie?  checkbox: 
 Est-ce que la compagnie? 

 La propriété  checked  détermine si la case à cocher est cochée ou non 
 Ensuite, ajoutez une entrée de date avec un sélecteur de date enveloppé dans un champ de formulaire Angular Material: 

     Created At 
    
     
     


 Comme expliqué dans  Angular mMaterial docs : 

 Le «datepicker» permet aux utilisateurs de saisir une date soit par saisie de texte, soit en choisissant une date dans le calendrier. Il est composé de plusieurs composants et directives qui fonctionnent ensemble. 

 Ensuite, ajoutez un groupe de boutons radio pour choisir le sexe du client: 
 Sexe 

     Masculin 
     Féminin 


 Pour obtenir le bouton radio actuellement sélectionné dans le groupe, liez simplement une variable à la propriété  valeur  
 Enfin, ajoutez un champ de sélection pour sélectionner la source du prospect / client: [19659207] Source principale 

        

         None 

         Email Marketing 

         Réseaux sociaux 

         Affilié 

    




 Le composant  prend en charge la liaison bidirectionnelle à la propriété  valeur  sans avoir besoin de formes angulaires. 
 Ajoutons maintenant un bouton pour créer le client à partir des informations de formulaire: 

     Créer 


 Vous devez maintenant créer des variables liées à ces contrôles. Dans  src / app / client-create / client-create.component.ts ajoutez le code suivant à la classe du composant: 
 name: string = "";
email: chaîne = "";
travail: chaîne = "";
adresse: chaîne = "";
selectedSource: string = "email";
selectedGender: string = "masculin";
isCompany: booléen = faux;
createdAt = nouveau FormControl (new Date ());
public createCustomer () {
/ * logique pour créer un client à partir des informations de formulaire * /
}

 Ceci est une capture d'écran de la composante UI: 
  
 Vous pouvez voir une démo en direct de cette  ici . 
 Conclusion 
 Avec l'internationalisation, l'accessibilité, l'absence de bugs et de hautes performances, Angular Material vise à construire un ensemble de composants UI de haute qualité en utilisant Angular et basé sur la spécification de conception Material. 
 Dans ce tutoriel, nous avons construit une interface utilisateur simple. Matériau angulaire avec une variété de composants de l'interface utilisateur. Vous pouvez trouver l'ensemble complet des composants de matériau angulaire disponibles dans les docu ments de matériau angulaire  . 
 Vous pouvez trouver le code source de la démo que nous avons construit tout au long de ce tutoriel dans  ce dépôt GitHub  


          

            
 Ahmed est un entrepreneur web, un développeur, un spécialiste du marketing numérique et un blogueur. Il écrit sur le développement de logiciels et de sites Web, des trucs pour gagner de l'argent, le référencement et plus encore. Vous pouvez trouver plus de son écriture sur son site  Techiediaries .






 Le meilleur outil 2023 pour ta croissance Instagram ! 



  










Source link