Thierry  Perret

Thierry Perret

1659112882

Comment Démarrer Avec Angular Material UI

Angular Material est une bibliothèque de composants d'interface utilisateur (UI) que les développeurs utilisent dans leurs projets Angular pour accélérer le processus de développement d'une interface utilisateur élégante et compatible. Il offre aux développeurs des composants d'interface utilisateur fonctionnels et élégants tels que des entrées, des tableaux de données, des cartes et bien plus encore. Ses composants aident à créer des applications/pages Web fonctionnelles, compatibles et captivantes et des sites Web réactifs concernant la durabilité, la polyvalence et la qualité de la conception.

Pourquoi Angular Material UI ?

Examinons l'importance de Angular Material dans nos projets pour mieux comprendre pourquoi il est essentiel au framework Angular.

  • Ses composants sont conçus pour qu'un site puisse s'adapter à n'importe quelle taille d'écran.
  • Il s'intègre facilement aux projets angulaires car il est construit avec une structure angulaire.
  • Il peut être intégré à une application angulaire nouvelle ou existante quelle que soit la version.
  • Il fournit des outils aux développeurs pour construire/personnaliser leurs composants.
  • Il accélère le processus de développement de la création de composants d'interface utilisateur à partir de zéro.

Voici quelques caractéristiques du matériau angulaire :

  • Le matériau angulaire se compose de CSS standard.
  • Il s'agit d'un navigateur multiplateforme et peut être utilisé pour créer un composant réutilisable.
  • Il a une conception réactive intégrée.
  • Il inclut la dernière version des composants de l'interface utilisateur : boutons, cases à cocher et champ de formulaire, conçus pour suivre les concepts de conception de matériaux angulaires.
  • Il fournit des fonctionnalités spécialisées et avancées telles qu'une barre d'outils, un balayage, une navigation latérale, des cartes, une numérotation rapide et de nombreuses autres fonctionnalités intéressantes.

Alternatives à l'interface utilisateur de matériau angulaire

Lorsque nous parlons d'alternatives, nous parlons d'autres bibliothèques de composants d'interface utilisateur que nous pouvons utiliser à la place de Angular Material. Voici des alternatives possibles et viables.

Ignite UI for Angular est une collection complète de widgets, de composants, de kits d'interface utilisateur et de directives d'accompagnement basés sur le matériel pour Angular qui permet aux programmeurs de créer les applications les plus avancées et les plus performantes pour les navigateurs contemporains, les expériences mobiles et les PWA.

Bootstrap est une bibliothèque open-source qui propose quelques widgets Angular natifs réalisés avec Bootstrap 4 CSS. Comme vous le savez probablement déjà, l'un des frameworks CSS les plus appréciés, Bootstrap, est utilisé pour créer des applications élégantes et contemporaines. Il comprend des bibliothèques pour HTML, CSS et JavaScript. Cependant, "ng-bootstrap" nous fournit la méthode idéale à utiliser dans nos applications angulaires sans aucun fichier JS. Auparavant, pour utiliser les frameworks Bootstrap dans l'application Angular, nous aurions dû utiliser le CSS bootstrap et ses fichiers JavaScript.

PrimeNG Une bibliothèque de composants d'interface utilisateur alternative créée par PrimeFaces. Il fournit une variété de thèmes prédéfinis et d'éléments d'interface utilisateur pour la présentation des données, les entrées de formulaire, les menus, les graphiques, les superpositions et d'autres utilisations. PrimeNG propose une large gamme de composants, notamment des tableaux de données, des listes déroulantes, des sélections multiples, des messages de notification, des accordéons, des fils d'Ariane et d'autres composants d'entrée qui répondraient à la majorité des exigences de l'interface utilisateur de votre application. Par conséquent, l'inclusion de bibliothèques distinctes pour diverses exigences d'interface utilisateur ne serait pas nécessaire.

Démarrage de notre projet

Pour les débutants qui n'ont jamais utilisé Angular auparavant ou qui essaient pour la première fois le framework avant de commencer à créer notre projet, nous devons configurer notre environnement et pour ce faire, nous devons installer la CLI à l'aide du gestionnaire de packages npm avec les éléments suivants commande.

npm install -g @angular/cli

Une fois cela fait, nous passons à la création/construction de notre projet. n/b : nous n'avons besoin d'exécuter la commande qu'une seule fois. Après cela, nous pouvons commencer à créer nos projets. Exécutez ng new my-appdans la ligne de commande, en remplaçant my-apppar le nom de votre application.

première

Sélectionnez Ypour le routage.

2

Sélectionnez CSSpour les styles.

Après tout cela, lancez la commande suivante :

cd <your-app-name>
ng add @angular/material

3

Sélectionnez Ypour continuer.

La ng addcommande installera Angular Material , le Component Dev Kit (CDK) et Angular Animations . En outre, vous devez choisir l'un des thèmes prédéfinis ou personnalisés selon vos besoins.

4

Cliquez Enterpour sélectionner votre thème.

5

Sélectionnez Ypour la typographie de matériau angulaire.

6

Sélectionnez Ypour les animations.

sept

Et notre package de matériel angulaire est entièrement installé. Passons à notre projet et créons du contenu.

Nous supprimerons tout dans notre app.component.htmlsauf <router-outlet></router-outlet>puisque le contenu matériel est généré automatiquement par Angular, et nous le modifierons.

Créer notre contenu

Pour utiliser les composants Angular Material dans l'application, nous devons importer les composants individuels dans le fichier app.module.ts file. Disons que nous voulons afficher Progress Spinner dans notre application. tout ce que nous avons à faire est d'importer le composant MatProgressSpinnerModule dans notre app.module.tsci-dessous :

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

@NgModule ({
  imports: [
    MatProgressSpinnerModule,
  ]
})
class AppModule {}

Pour les applications plus importantes, vous devez créer un fichier séparé ; disons material.module.ts, et importez tous les composants individuels, puis importez le module de matériau dans app.module.ts. Cela aide notre code à être DRY ("Ne vous répétez pas"), en particulier lorsque nous avons besoin de plus d'un composant Angular Material. Ajoutez la <mat-spinner>balise ci- app.component.htmldessous :

<mat-spinner color='warn'></mat-spinner>

Ensuite, lancez votre serveur de développement local :

ng serve

8

Générer un composant de matériau

Créons quelques composants.

Un composant de barre d'outils

Un composant de barre d'outils est un endroit où les en-têtes, les titres ou les actions peuvent être placés. La plupart du temps, une barre d'outils avec une seule ligne et le titre du programme seront ajoutés en haut de votre application. Créons un composant d'en-tête de barre d'outils pour notre projet.

<mat-toolbar color="primary">
    <span>My Angular Material App</span>
</mat-toolbar>

9

Un composant de carte

A cardest un conteneur de contenu qui mélange du texte, des graphiques et des activités autour d'un même thème. La carte la plus simple n'a besoin que d'un <mat-card>élément rempli de contenu. Notre composant de carte aura un titre et un sous-titre, une image, un paragraphe et une description.

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

Dix

Un composant de bouton

Les éléments natifs "bouton" ou "a" complétés par le style Material Design et les ondulations d'encre constituent les " boutons de matériau angulaires ". Nous allons donc ajouter des variétés de boutons en fonction de notre projet.

<section>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
        <mat-icon>open_in_new</mat-icon>
      </button>
    <div class="example-button-container">
        <button mat-fab disabled aria-label="Example icon button with a heart icon">
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
  </div>
</section>

11

Un composant de barre progressive

Notre composant de barre progressive affiche l'activité et la progression sous la forme d'une barre de progression horizontale. La barre de progression prend en charge quatre modes de fonctionnement : déterminé, indéterminé, tampon et enquête. Dans cette section, nous envisagerons d'utiliser le signe indéterminé chaque fois que l'utilisateur doit attendre pendant que quelque chose se termine, et il n'est pas nécessaire de spécifier combien de temps cela prendra.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

11b

Un champ de formulaire/sélecteur de date

Le composant de champ de formulaire est un composant qui applique des styles de champ de texte populaires tels que le soulignement, l'étiquette flottante et les messages d'indication à plusieurs composants de matériau angulaire. En même temps, le Datepicker se compose d'une entrée de texte et d'une fenêtre contextuelle de calendrier jointes par la propriété Datepicker de l'entrée de texte.

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

douzième

Tout mettre ensemble

Après de nombreuses explications, combinons tout ce dont nous avons discuté dans notre article pour produire quelque chose de significatif pour les yeux.

Générer un composant

Générer un composant à l'aide d' Angular CLI

  • Courirng generate component home
  • Configurez les itinéraires dans notre dossier personnel ; remplacez les routes vides dans app.routing.module.tspar :
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full'}
];

Ces procédures créeront un composant appelé Homeet le définiront comme page d'accueil. Exécuter ng servepour compiler l'application et voir le texteHome Works!

Ajouter des composants de matériau angulaire

Ajouter des composants de matériau angulaires àhome.component.html

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

<div class="flex-container">
  <div>
      <button mat-raised-button color="primary"> Primary</button>
      <button mat-raised-button color="accent"> Accent</button>
      <button mat-stroked-button>Basic</button>
      <button mat-stroked-button color="primary">Primary</button>
  </div>
  <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-checkbox>Check me!</mat-checkbox>
  <mat-slider></mat-slider>
</div>

Ajouter des styles de base

Nous ajouterons des styles CSS FlexBox de base pour créer un espacement sur notre page d'accueil. Vous pouvez trouver le code sur la page Github .

13

Conclusion

Avec l'aide de Angular Material , nous avons pu créer une page Web interactive, comme nous pouvons le voir ci-dessus. Cela nous indique que les développeurs peuvent créer des projets rapides qui sont attrayants, réactifs et intuitifs aux yeux des utilisateurs dans tous les espaces de développement. Pour notre code source, cliquez sur le lien Github .

Lien : https://blog.openreplay.com/getting-started-with-angular-material-ui

#angular #angularjs #javascript #ui

What is GEEK

Buddha Community

Comment Démarrer Avec Angular Material UI

Ayyaz Zafar

1624138795

Angular Material Autocomplete - Multiple Use Cases covered

Learn How to use Angular Material Autocomplete Suggestions Search Input. I covered multiple use cases.

Please watch this video. I hope this video would be helpful for you to understand it and use it in your projects

Please subscribe: https://www.youtube.com/channel/UCL5nKCmpReJZZMe9_bYR89w

#angular #angular-material #angular-js #autocomplete #angular-material-autocomplete #angular-tutorial

Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Roberta  Ward

Roberta Ward

1593184320

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular.

Angular is a Typescript-based open-source front-end web application platform. The Angular Team at Google and a community of individuals and corporations lead it. Angular lets you extend HTML’s syntax to express your apps’ components clearly. The angular resolves challenges while developing a single page and cross-platform applications. So, here the meaning of the single-page applications in angular is that the index.html file serves the app. And, the index.html file links other files to it.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

  • When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.
  • When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.
  • When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

image for understanding data binding

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular

Thierry  Perret

Thierry Perret

1659112882

Comment Démarrer Avec Angular Material UI

Angular Material est une bibliothèque de composants d'interface utilisateur (UI) que les développeurs utilisent dans leurs projets Angular pour accélérer le processus de développement d'une interface utilisateur élégante et compatible. Il offre aux développeurs des composants d'interface utilisateur fonctionnels et élégants tels que des entrées, des tableaux de données, des cartes et bien plus encore. Ses composants aident à créer des applications/pages Web fonctionnelles, compatibles et captivantes et des sites Web réactifs concernant la durabilité, la polyvalence et la qualité de la conception.

Pourquoi Angular Material UI ?

Examinons l'importance de Angular Material dans nos projets pour mieux comprendre pourquoi il est essentiel au framework Angular.

  • Ses composants sont conçus pour qu'un site puisse s'adapter à n'importe quelle taille d'écran.
  • Il s'intègre facilement aux projets angulaires car il est construit avec une structure angulaire.
  • Il peut être intégré à une application angulaire nouvelle ou existante quelle que soit la version.
  • Il fournit des outils aux développeurs pour construire/personnaliser leurs composants.
  • Il accélère le processus de développement de la création de composants d'interface utilisateur à partir de zéro.

Voici quelques caractéristiques du matériau angulaire :

  • Le matériau angulaire se compose de CSS standard.
  • Il s'agit d'un navigateur multiplateforme et peut être utilisé pour créer un composant réutilisable.
  • Il a une conception réactive intégrée.
  • Il inclut la dernière version des composants de l'interface utilisateur : boutons, cases à cocher et champ de formulaire, conçus pour suivre les concepts de conception de matériaux angulaires.
  • Il fournit des fonctionnalités spécialisées et avancées telles qu'une barre d'outils, un balayage, une navigation latérale, des cartes, une numérotation rapide et de nombreuses autres fonctionnalités intéressantes.

Alternatives à l'interface utilisateur de matériau angulaire

Lorsque nous parlons d'alternatives, nous parlons d'autres bibliothèques de composants d'interface utilisateur que nous pouvons utiliser à la place de Angular Material. Voici des alternatives possibles et viables.

Ignite UI for Angular est une collection complète de widgets, de composants, de kits d'interface utilisateur et de directives d'accompagnement basés sur le matériel pour Angular qui permet aux programmeurs de créer les applications les plus avancées et les plus performantes pour les navigateurs contemporains, les expériences mobiles et les PWA.

Bootstrap est une bibliothèque open-source qui propose quelques widgets Angular natifs réalisés avec Bootstrap 4 CSS. Comme vous le savez probablement déjà, l'un des frameworks CSS les plus appréciés, Bootstrap, est utilisé pour créer des applications élégantes et contemporaines. Il comprend des bibliothèques pour HTML, CSS et JavaScript. Cependant, "ng-bootstrap" nous fournit la méthode idéale à utiliser dans nos applications angulaires sans aucun fichier JS. Auparavant, pour utiliser les frameworks Bootstrap dans l'application Angular, nous aurions dû utiliser le CSS bootstrap et ses fichiers JavaScript.

PrimeNG Une bibliothèque de composants d'interface utilisateur alternative créée par PrimeFaces. Il fournit une variété de thèmes prédéfinis et d'éléments d'interface utilisateur pour la présentation des données, les entrées de formulaire, les menus, les graphiques, les superpositions et d'autres utilisations. PrimeNG propose une large gamme de composants, notamment des tableaux de données, des listes déroulantes, des sélections multiples, des messages de notification, des accordéons, des fils d'Ariane et d'autres composants d'entrée qui répondraient à la majorité des exigences de l'interface utilisateur de votre application. Par conséquent, l'inclusion de bibliothèques distinctes pour diverses exigences d'interface utilisateur ne serait pas nécessaire.

Démarrage de notre projet

Pour les débutants qui n'ont jamais utilisé Angular auparavant ou qui essaient pour la première fois le framework avant de commencer à créer notre projet, nous devons configurer notre environnement et pour ce faire, nous devons installer la CLI à l'aide du gestionnaire de packages npm avec les éléments suivants commande.

npm install -g @angular/cli

Une fois cela fait, nous passons à la création/construction de notre projet. n/b : nous n'avons besoin d'exécuter la commande qu'une seule fois. Après cela, nous pouvons commencer à créer nos projets. Exécutez ng new my-appdans la ligne de commande, en remplaçant my-apppar le nom de votre application.

première

Sélectionnez Ypour le routage.

2

Sélectionnez CSSpour les styles.

Après tout cela, lancez la commande suivante :

cd <your-app-name>
ng add @angular/material

3

Sélectionnez Ypour continuer.

La ng addcommande installera Angular Material , le Component Dev Kit (CDK) et Angular Animations . En outre, vous devez choisir l'un des thèmes prédéfinis ou personnalisés selon vos besoins.

4

Cliquez Enterpour sélectionner votre thème.

5

Sélectionnez Ypour la typographie de matériau angulaire.

6

Sélectionnez Ypour les animations.

sept

Et notre package de matériel angulaire est entièrement installé. Passons à notre projet et créons du contenu.

Nous supprimerons tout dans notre app.component.htmlsauf <router-outlet></router-outlet>puisque le contenu matériel est généré automatiquement par Angular, et nous le modifierons.

Créer notre contenu

Pour utiliser les composants Angular Material dans l'application, nous devons importer les composants individuels dans le fichier app.module.ts file. Disons que nous voulons afficher Progress Spinner dans notre application. tout ce que nous avons à faire est d'importer le composant MatProgressSpinnerModule dans notre app.module.tsci-dessous :

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

@NgModule ({
  imports: [
    MatProgressSpinnerModule,
  ]
})
class AppModule {}

Pour les applications plus importantes, vous devez créer un fichier séparé ; disons material.module.ts, et importez tous les composants individuels, puis importez le module de matériau dans app.module.ts. Cela aide notre code à être DRY ("Ne vous répétez pas"), en particulier lorsque nous avons besoin de plus d'un composant Angular Material. Ajoutez la <mat-spinner>balise ci- app.component.htmldessous :

<mat-spinner color='warn'></mat-spinner>

Ensuite, lancez votre serveur de développement local :

ng serve

8

Générer un composant de matériau

Créons quelques composants.

Un composant de barre d'outils

Un composant de barre d'outils est un endroit où les en-têtes, les titres ou les actions peuvent être placés. La plupart du temps, une barre d'outils avec une seule ligne et le titre du programme seront ajoutés en haut de votre application. Créons un composant d'en-tête de barre d'outils pour notre projet.

<mat-toolbar color="primary">
    <span>My Angular Material App</span>
</mat-toolbar>

9

Un composant de carte

A cardest un conteneur de contenu qui mélange du texte, des graphiques et des activités autour d'un même thème. La carte la plus simple n'a besoin que d'un <mat-card>élément rempli de contenu. Notre composant de carte aura un titre et un sous-titre, une image, un paragraphe et une description.

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

Dix

Un composant de bouton

Les éléments natifs "bouton" ou "a" complétés par le style Material Design et les ondulations d'encre constituent les " boutons de matériau angulaires ". Nous allons donc ajouter des variétés de boutons en fonction de notre projet.

<section>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
        <mat-icon>open_in_new</mat-icon>
      </button>
    <div class="example-button-container">
        <button mat-fab disabled aria-label="Example icon button with a heart icon">
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
  </div>
</section>

11

Un composant de barre progressive

Notre composant de barre progressive affiche l'activité et la progression sous la forme d'une barre de progression horizontale. La barre de progression prend en charge quatre modes de fonctionnement : déterminé, indéterminé, tampon et enquête. Dans cette section, nous envisagerons d'utiliser le signe indéterminé chaque fois que l'utilisateur doit attendre pendant que quelque chose se termine, et il n'est pas nécessaire de spécifier combien de temps cela prendra.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

11b

Un champ de formulaire/sélecteur de date

Le composant de champ de formulaire est un composant qui applique des styles de champ de texte populaires tels que le soulignement, l'étiquette flottante et les messages d'indication à plusieurs composants de matériau angulaire. En même temps, le Datepicker se compose d'une entrée de texte et d'une fenêtre contextuelle de calendrier jointes par la propriété Datepicker de l'entrée de texte.

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

douzième

Tout mettre ensemble

Après de nombreuses explications, combinons tout ce dont nous avons discuté dans notre article pour produire quelque chose de significatif pour les yeux.

Générer un composant

Générer un composant à l'aide d' Angular CLI

  • Courirng generate component home
  • Configurez les itinéraires dans notre dossier personnel ; remplacez les routes vides dans app.routing.module.tspar :
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full'}
];

Ces procédures créeront un composant appelé Homeet le définiront comme page d'accueil. Exécuter ng servepour compiler l'application et voir le texteHome Works!

Ajouter des composants de matériau angulaire

Ajouter des composants de matériau angulaires àhome.component.html

<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Mercedes-Benz 360c</mat-card-title>
    <mat-card-subtitle>Automobile</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://images.theconversation.com/files/274334/original/file-20190514-60570-gfti2h.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop" alt="Photo of a Mercedes-Benz">
  <mat-card-content>
    <p>
      The unique 360-degree view feature on CarDekho lets you explore a car from each and every angle on your mobile device.
      Take a detailed tour of a car's exterior and interior without having to visit a showroom! For the best experience,
        download the CarDekho app.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

<div class="flex-container">
  <div>
      <button mat-raised-button color="primary"> Primary</button>
      <button mat-raised-button color="accent"> Accent</button>
      <button mat-stroked-button>Basic</button>
      <button mat-stroked-button color="primary">Primary</button>
  </div>
  <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-checkbox>Check me!</mat-checkbox>
  <mat-slider></mat-slider>
</div>

Ajouter des styles de base

Nous ajouterons des styles CSS FlexBox de base pour créer un espacement sur notre page d'accueil. Vous pouvez trouver le code sur la page Github .

13

Conclusion

Avec l'aide de Angular Material , nous avons pu créer une page Web interactive, comme nous pouvons le voir ci-dessus. Cela nous indique que les développeurs peuvent créer des projets rapides qui sont attrayants, réactifs et intuitifs aux yeux des utilisateurs dans tous les espaces de développement. Pour notre code source, cliquez sur le lien Github .

Lien : https://blog.openreplay.com/getting-started-with-angular-material-ui

#angular #angularjs #javascript #ui

Monty  Boehm

Monty Boehm

1625127900

Angular Material 12 File Upload Example with Progress Bar

In this tutorial, I will show you way to build an Angular Material 12 File upload to Rest API example using HttpClient, FormData and Progress Bar.

More Practice:

–  Angular Material 12 Image upload with Preview example

–  Angular 12 + Spring Boot: File upload example

–  Angular 12 + Node.js: File Upload example

–  Angular 12 Login and Registration example with JWT & Web Api

–  Angular 12 CRUD Application example with Web API

–  Angular 12 Form Validation example (Reactive Forms)

– Bootstrap instead:  Angular 12 File upload example with progress bar & Bootstrap

#angular #angular #angular 12 #angular material #file