Implementar Flex Layout en Angular

1. Problemas con Flexbox basado en CSS
2. El diseño flexible en angular
3. Pasos para implementar Flex Layout en Angular

Este tutorial discutirá y demostrará cómo usar el diseño angular flexible.

El diseño flexible angular es un componente angular que implementa un sistema de diseño receptivo basado en flexbox. Nos permite crear diseños que responden bien en dispositivos móviles y pantallas de escritorio.

Flexbox es un modo de diseño que organiza los elementos en el contenedor según el espacio disponible y el orden especificado en el código fuente, lo que significa que se ajustará automáticamente según el tamaño de la pantalla.

Esto es diferente de otros modos de diseño, como la cuadrícula o el posicionamiento absoluto, donde los elementos tienen posiciones establecidas explícitamente.

Problemas con Flexbox basado en CSS

Flexbox basado en CSS es una forma fácil e intuitiva de crear diseños, pero surgen algunos problemas al usar este método. Uno de los principales problemas es la falta de compatibilidad con navegadores antiguos como IE 9, IE 10, Safari 5 y Opera 12.

Otro problema con flexbox basado en CSS es que no funciona bien con un diseño receptivo. Esto se debe a que es difícil hacer que un diseño se vea bien en diferentes tamaños de pantalla sin agregar código o imágenes adicionales.

La cantidad de CSS generado para flexbox CSS es enorme (> 250k), y debemos modificar los estilos de flexbox secundarios si cambiamos la dirección del diseño. Tampoco se admiten puntos de interrupción de consulta de medios personalizados.

Los problemas anteriores se solucionaron mediante el uso de un diseño de flexión angular. El diseño flexible angular es un motor de diseño de interfaz de usuario solo de TypeScript que especifica la configuración de diseño a través del marcado HTML (API de diseño).

El diseño flexible en angular

El diseño flexible de Angular es un nuevo motor de diseño para Angular introducido en la versión 4.0. Los diseños flexibles son un elemento secundario del módulo de diseño de caja flexible de CSS (o simplemente “caja flexible”).

Los diseños flexibles permiten una forma más natural e intuitiva de especificar cómo diseñar el contenido dentro de un contenedor. Esto se puede hacer definiendo el eje central, que determina cómo se distribuyen los elementos flexibles en el contenedor y luego especificando uno o más ejes secundarios que definen su tamaño y posición en relación con otros elementos.

Las principales ventajas de utilizar un diseño de flexión angular son:

• es más fácil de usar que otras opciones;
• te permite crear diseños responsivos rápidamente;
• no se limita a solo dos dimensiones como flotadores o bloques en línea;
• tiene más opciones que CSS Grid.

Para crear diseños receptivos usando CSS flexbox estándar o CSS grid, debemos escribir código CSS complicado usando consultas de medios. También es difícil de comprender.

Sin embargo, podemos usar los atributos de flexbox para declarar los parámetros de diseño de flexbox directamente dentro de la plantilla HTML con el nuevo diseño angular de flexbox.

Pasos para implementar Flex Layout en Angular

El diseño flexible angular permite a los desarrolladores crear diseños de interfaz de usuario receptivos. Está diseñado para ser utilizado en el navegador y es compatible con entornos móviles y de escritorio.

El tutorial lo guiará a través de los siguientes pasos:

Analicemos un ejemplo de diseño de flexión angular utilizando los pasos mencionados anteriormente.

Código TypeScript:

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

Código 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>

Haga clic aquí para ver la demostración en vivo del código anterior.