Implémenter Flex Layout dans Angular : un guide pratique

Hark Labs2022-05-12 · 13 min read

Implémenter Flex Layout dans Angular : un guide pratique

Introduction

CSS Flex Layout est utilisé pour créer des mises en page fluides et flexibles. Cependant, lors de l'utilisation de Angular il existe des scénarios où nous avons besoin d'un contrôle plus dynamique sur les mises en page. De plus, l'utilisation de CSS Flexbox nécessite un style complexe qui peut être difficile pour de nombreux développeurs. Flex Layout est un moteur de composants qui vise à résoudre ce problème. Il fournit un ensemble de directives disponibles pour une implémentation dans vos applications.

Flex Layout utilise Typescript ce qui le rend idéal pour les applications Angular. Aucune feuille de style externe n'est nécessaire, et différentes directives peuvent être utilisées pour créer des mises en page réactives. Dans ce tutoriel, nous allons créer une application Angular simple et y injecter Flex Layout pour organiser nos composants.

Commençons !

Prérequis

Les applications Angular utilisent Node.js comme environnement d'exécution. Pour suivre ce tutoriel, vous devrez avoir installé Node.js sur votre machine de développement. Nous disposons d'un guide complet Comment installer Node.js sur Ubuntu 18.04 qui vous aidera à configurer Node.js facilement.
Vous devrez également être familiarisé avec l'utilisation des composants Angular et la configuration d'un projet Angular.

Configuration du projet

Ici, nous devons effectuer deux étapes :

Nous devons configurer une nouvelle application Angular.
Nous devrons installer Flex Layout à partir de npx afin de pouvoir l'importer et l'utiliser dans notre application.

Pour créer une nouvelle application Angular, ouvrez votre terminal et exécutez la commande ci-dessous :

npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

1	npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

Ici, nous créons une nouvelle application Angular en utilisant @angular/cli. Le nom de notre application est angular-flex-example. Nous utiliserons CSS plutôt que Sass ou Less pour le style. De plus, nous spécifierons que nous n'avons pas besoin de routage. Nous ne nous soucions pas non plus des tests, nous les ignorons donc également.

Maintenant que votre application est prête, accédez au répertoire de l'application et exécutez la commande ci-dessous pour installer Flex Layout :

cd angular-flex-example
npm install @angular/flex-layout@10.0.0-beta.32

1 2	cd angular-flex-example npm install @angular/flex-layout@10.0.0-beta.32

Une fois que la commande ci-dessus a terminé l'installation, ajoutez le code ci-dessous dans votre module d'application pour importer FlexLayoutModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from "@angular/flex-layout";
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],

    imports: [
        BrowserModule,
        FlexLayoutModule
    ],

    providers: [],

    bootstrap: [AppComponent]
})

export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

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

import { FlexLayoutModule } from "@angular/flex-layout";

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FlexLayoutModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Ensuite, exécutez la commande ci-dessous pour vous assurer que tout fonctionne comme prévu :

npm start

npm start

Votre application sera servie sur localhost:4200 par défaut. Accédez à cette URL dans le navigateur Web. Vous verrez le message : “angular-flex-example is running!. Une fois cette configuration terminée, concevons notre modèle à l’aide de Flex Layout.

Créer le Flex Layout

Ici, nous allons ajouter du code dans app.component.html pour utiliser le Flex Layout avec FlexLayoutModule. Notre résultat final sera similaire à la figure ci-dessous :

Pour obtenir le résultat ci-dessus, ouvrez le fichier app.component.css dans votre éditeur et ajoutez les lignes de code ci-dessous :

.container {
    margin: 10px;
}

.item {
    border-radius: .2em;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 2em;
    padding: 4em 1em;
    text-transform: uppercase;
}

.item-1 {
    background-color: #009169;
}

.item-2 {
    background-color: #55b296;
}

.item-3 {
    background-color: #9fd3c3;
}

.item-4 {    
    background-color: #e7b013;
}

.item-5 {
    background-color: #073443;
}

.container {

margin: 10px;

}

.item {

border-radius: .2em;

color: #ffffff;

font-family: sans-serif;

font-size: 2em;

padding: 4em 1em;

text-transform: uppercase;

}

.item-1 {

background-color: #009169;

}

.item-2 {

background-color: #55b296;

}

.item-3 {

background-color: #9fd3c3;

}

.item-4 {

background-color: #e7b013;

}

.item-5 {

background-color: #073443;

}

Maintenant que vous avez ajouté le code ci-dessus, ouvrez le fichier app.composant.html et ajoutez le code suivant. Ce code contient deux divs conteneurs et cinq divs internes:

<div class="container">
    <div class="item item-1">
    Élément 1
    </div>
    
    <div class="item item-2">
    Élément 2
    </div>
    
    <div class="item item-3">
    Élément 3
    </div>

</div>

<div class="container">
    <div class="item item-4">
    Élément 4
    </div>
    
    <div class="item item-5">
    Élément 5
    </div>

</div>

Élément 1

</div>

Élément 2

</div>

Élément 3

</div>

Élément 4

</div>

Élément 5

</div>

Après cela, compilez et exécutez votre application. Vous verrez cinq divs empilées les unes sur les autres car nous n'avons fourni aucune mise en page jusqu'à présent. Pour ajouter le fxLayout ajoutez le code ci-dessous :

<div class="container" fxLayout>
    <div class="item item-1">
    Élément 1
    </div>

    <div class="item item-2">
    Élément 2
    </div>

    <div class="item item-3">
    Élément 3
    </div>

</div>

<div class="container" fxLayout>

    <div class="item item-4">
    Élément 4
    </div>
   
    <div class="item item-5">
    Élément 5
    </div>

</div>

Élément 1

</div>

Élément 2

</div>

Élément 3

</div>

Élément 4

</div>

Élément 5

</div>

Dans le code ci-dessus, après avoir appliqué ce fxLayout, les propriétés CSS display:flex et flex-direction:row sont appliquées au conteneur divs. Maintenant, lorsque vous lancez l'application, vous aurez trois divs sur la première ligne et deux divs sur la ligne du bas.

Ensuite, nous ajoutons fxLayoutAlign et fxLayoutGap pour améliorer notre mise en page :

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
    <div class="item item-1">
    Élément 1
    </div>

    <div class="item item-2">
    Élément 2
    </div>

    <div class="item item-3">
    Élément 3
    </div>

</div>

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">  
    <div class="item item-4">
    Élément 4
    </div>

    <div class="item item-5">
    Élément 5
    </div>
</div>

Élément 1

</div>

Élément 2

</div>

Élément 3

</div>

Élément 4

</div>

Élément 5

</div>

Cela appliquera place-content: stretch center et align-items: stretch styles au conteneur div. Cela appliquera également 10px d'espace entre les éléments flex.

Maintenant que nous avons appliqué fxLayout, il est temps de rendre notre mise en page réactive :

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1">
    Élément 1
    </div>
    
    <div class="item item-2">
    Élément 2
    </div>

    <div class="item item-3">
    Élément 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4">
    Élément 4
    </div>

    <div class="item item-5">
    Élément 5
    </div>
</div>

Élément 1

</div>

Élément 2

</div>

Élément 3

</div>

Élément 4

</div>

Élément 5

</div>

Ce code définira le point de rupture pour les écrans très petits xs. L'écran changera la mise en page de la ligne par défaut à la colonne et la taille de l'espace passera de “10px” à “0px” sur les écrans très petits. Vous pouvez tester cela en lançant l'application et en redimensionnant la fenêtre sur xs (moins de 599px de large). Vous observerez le changement de style.

Pour différentes tailles d'écran, nous avons différents suffixes :

sm – petit
md – moyen
lg – grand
xl – très grand

Nous avons également des directives pour les éléments enfants. Ajoutez fxFlex comme dans le code ci-dessous :

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-1" fxFlex="15%">
        Élément 1
    </div>

    <div class="item item-2" fxFlex="20%">
        Élément 2
    </div>

    <div class="item item-3" fxFlex>
        Élément 3
    </div>

</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div class="item item-4" fxFlex>
        Élément 4
    </div>
    
    <div class="item item-5" fxFlex="200px">
        Élément 5
    </div>

</div>

Élément 1

</div>

Élément 2

</div>

Élément 3

</div>

Élément 4

</div>

Élément 5

</div>

Cela appliquera flex-grow: 1, flex-shrink: 1, et flex-basis: 100% au layout. Si vous spécifiez la valeur de largeur, cela appliquera la propriété max-width.

Ajoutons fxFlexOrder et fxFlexOffset:

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div class="item item-1" fxFlex="15%">
    Élément 1
    </div>

    <div class="item item-2" fxFlex="20%" fxFlexOrder="3">
    Élément 2
    </div>

    <div class="item item-3" fxFlex>
    Élément 3
    </div>
</div>

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
    <div class="item item-4" fxFlex fxFlexOffset="30px" fxFlexOffset.xs="0">
    Élément 4
    </div>

    <div class="item item-5" fxFlex="200px">
    Élément 5
    </div>

</div>

Élément 1

</div>

Élément 2

</div>

Élément 3

</div>

Élément 4

</div>

Élément 5

</div>

En utilisant ce code, nous avons appliqué order: 3 au deuxième élément. Cela appliquera également un margin-left: 50px au quatrième élément. Maintenant, si vous lancez l'application, vous verrez que le deuxième élément est en troisième position de la ligne tandis que le quatrième élément obtient un espacement de 30px depuis le début.

En résumé

Dans ce tutoriel, nous avons appris à implémenter Flex Layout dans les applications Angular. Cela va être utile car nous pourrons utiliser des mises en page CSS Flexbox prêtes à l'emploi sans avoir à coder le style nous-mêmes. Si vous avez besoin de plus d'informations, reportez-vous au Wiki de Flex Layout sur la page GitHub.

Pour faire simple dans ce tutoriel, nous n'avons pas utilisé de liaison pour lier les valeurs dans la classe du composant. Cependant, la liaison unidirectionnelle et bidirectionnelle est possible dans la classe du composant [fxLayout]="votre direction de mise en page". Cela vous donnera plus de contrôle pour créer des mises en page et les cas d'utilisation dynamiques pourront être gérés.

Les applications Angular utilisent Node.js comme environnement d'exécution. Si vous souhaitez en savoir plus sur Node.js et comment déployer des applications Node.js sur Docker, consultez notre Comment déployer une application Node.js (Express.js) avec Docker sur Ubuntu 20.04Pour en savoir plus sur Angular, consultez notre tutoriel Navigation avec RouterLink, Navigate et NavigateByUrl dans Angular Router.

Bonne programmation !

Hark Labs

Auteur · CloudSigma

Preslav Dobrev est un designer créatif chez CloudSigma, axé sur une identité commerciale cohérente à travers des canaux marketing traditionnels et innovants. Il excelle à fusionner la vision artistique avec le marketing stratégique pour créer des récits de marque percutants.

Implémenter Flex Layout dans Angular : un guide pratique

Introduction

Prérequis

Configuration du projet

Créer le Flex Layout

En résumé

Hark Labs

Commentaires