Implémenter Flex Layout dans Angular

1. Problèmes avec Flexbox basé sur CSS
2. La mise en page flexible en Angular
3. Étapes pour implémenter Flex Layout dans Angular

Ce didacticiel discutera et démontrera comment utiliser la mise en page Angular flex.

La mise en page Angular flexible est un composant Angular qui implémente un système de mise en page réactif basé sur une boîte flexible. Cela nous permet de créer des mises en page qui répondent bien sur les appareils mobiles et les écrans de bureau.

Flexbox est un mode de mise en page qui organise les éléments dans le conteneur en fonction de l’espace disponible et de l’ordre spécifié dans le code source, ce qui signifie qu’il s’ajustera automatiquement en fonction de la taille de l’écran.

Ceci est différent des autres modes de mise en page tels que la grille ou le positionnement absolu, où les éléments ont des positions explicitement définies.

Problèmes avec Flexbox basé sur CSS

La boîte flexible basée sur CSS est un moyen simple et intuitif de créer des mises en page, mais certains problèmes surviennent lors de l’utilisation de cette méthode. L’un des principaux problèmes est le manque de prise en charge des anciens navigateurs comme IE 9, IE 10, Safari 5 et Opera 12.

Un autre problème avec la flexbox basée sur CSS est qu’elle ne fonctionne pas bien avec la conception réactive. En effet, il est difficile de faire en sorte qu’une mise en page soit belle sur différentes tailles d’écran sans ajouter de code ou d’images supplémentaires.

La quantité de CSS générée pour le CSS flexbox est énorme (> 250k), et nous devons modifier les styles de la flexbox enfant si nous changeons le sens de la mise en page. Les points d’arrêt de requête multimédia personnalisés ne sont pas non plus pris en charge.

Les problèmes précédents ont été résolus en utilisant une disposition Angular flexible. La mise en page Angular flexible est un moteur de mise en page d’interface utilisateur TypeScript uniquement qui spécifie les paramètres de mise en page via le balisage HTML (API de mise en page).

La mise en page flexible en Angular

La mise en page Angular flex est un nouveau moteur de mise en page pour Angular introduit dans la version 4.0. Les mises en page flexibles sont un enfant du module CSS Flexible Box Layout (ou simplement “flexbox”).

Les mises en page flexibles offrent une manière plus naturelle et intuitive de spécifier comment mettre en page le contenu à l’intérieur d’un conteneur. Cela peut être fait en définissant l’axe central, qui détermine la façon dont les éléments flexibles sont distribués dans le conteneur, puis en spécifiant un ou plusieurs axes secondaires qui définissent leur taille et leur position par rapport aux autres éléments.

Les principaux avantages de l’utilisation d’une disposition flexible Angular sont :

• il est plus facile à utiliser que les autres options ;
• il vous permet de créer rapidement des designs réactifs ;
• il n’est pas limité à deux dimensions comme les flotteurs ou les blocs en ligne ;
• il a plus d’options que CSS Grid.

Pour créer des mises en page réactives à l’aide d’une boîte flexible CSS standard ou d’une grille CSS, nous devons écrire un code CSS compliqué à l’aide de requêtes multimédias. C’est aussi difficile à comprendre.

Cependant, nous pouvons utiliser les attributs flexbox pour déclarer les paramètres de mise en page flexbox directement dans le modèle HTML avec la nouvelle mise en page flexbox Angular.

Étapes pour implémenter Flex Layout dans Angular

La disposition flexible Angular permet aux développeurs de créer des dispositions d’interface utilisateur réactives. Il est conçu pour être utilisé dans le navigateur et prend en charge les environnements mobiles et de bureau.

Le didacticiel vous guidera à travers les étapes suivantes :

Discutons d’un exemple de mise en page Angular flex en utilisant les étapes mentionnées ci-dessus.

Code TypeScript :

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent  { }

Code HTML:

<div fxLayout="column" fxLayoutAlign="center">
<mat-card fxFlex="100">
<div fxLayout="column">
    <div fxFlex="60" class="action-blurb">Home</div>
    <div fxFlex="90" class="action-blurb" fxFlexOffset="20">Contact US</div>
</div>
</mat-card>
</div>

Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.