¿Qué es FlexLayout y como integrarlo con Angular?

Hacer un tiempo publiqué un artículo sobre integrar FlexLayout con Angular Universal pero resulta que no he escrito un artículo sobre FlexLayout aún. Pues Este es mi momento de redimir esto y explicar ¿qué es FlexLayout? y ¿cómo configurarlo en un proyecto Angular?.

¿Qué es FlexLayout?

FlexLayout provee una sofisticada capa de aplicación (API) por medio del uso de Flexbox CSS + mediaQuery. Este módulo brinda a los desarrolladores de Angular componentes que utilizan Layout API, observables mediaQuery e inyección DOM con flexbox CSS.

El core de FlexLayout automatiza inteligentemente el proceso de aplicar apropiadamente Flexbox CSS a la jerarquía del navegador. Esta automatización también soluciona muchas de las complejidades y soluciones alternativas que se encuentran con la forma tradicional (manual) de utilizar CSS.

El potencial real de FlexLayout, de hecho, se encuentra en su implementación del responsive en la página web. La API responsive que provee, hace realmente fácil su uso para los desarrolladores, que pueden utilizar de manera muy sencilla definir diferentes diseños, tamaños y visibilidad de los componentes HTML dependiendo de las resoluciones en los diferentes dispositivos.

En esencia, FlexLayout es un framework CSS, que se integra con la mayoría de los SPA actuales (Angular, React, Vue, etc...) e implementa todo lo necesario para que los desarrolladores puedan definir los diseños de sus aplicaciones de una manera organizada y legible para todos.

Integrar flexLayout con Angular

Primeramente se creará una aplicación de Angular, para luego proceder a instalar e integrar FlexLayout. Abrimos un terminal y nos movemos a la carpeta donde tenemos nuestros proyectos. En este directorio ejecutamos el siguiente comando:

ng new angular-flexlayout

Nota: asumo que ya tienes instalado angluar/cli, para que puedas utilizar el comando ng, en caso contrario puedes instalarlo con el comando npm install -g @angular/cli@latest

Una vez que el comando termina de ejecutarse, deberíamos tener una nueva carpeta con el proyecto nuevo que se ha creado así como todas las dependencias iniciales instaladas y listo para ser ejecutado. Así que lo siguiente será ejecutar el proyecto con el comando siguiente para luego abrir en el navegador el siguiente link y comprobar que el proyecto está en efecto funcionando.

npm start

Deberíamos tener la siguiente página en el navegador con el nuevo proyecto funcionando.

Nota: La versión de Angular utilizada en el artículo es la última versión estable a la fecha de ser publicado el mismo (14.0.0).

Con el nuevo proyecto de Angular listo y funcionando, ya podemos proceder a instalar FlexLayout. Por tanto, lo siguiente sería ejecutar el siguiente comando en el terminal.

npm i -s @angular/flex-layout @angular/cdk

Una vez que se termina de instalar, pasamos a realizar las modificaciones pertinentes para poder utilizar FlexLayout en el proyecto. Solo es necesario ir al fichero app.module.ts.

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

@NgModule({
  ...
  imports: [
    ...
    FlexLayoutModule
  ],
  ...
})
export class AppModule { }

Hecho esto, ya es posible utilizar FlexLayout en la aplicación. Para demostrarlo, hize algunos pequeños cambios en archivo app.component.html donde agregué el siguiente código de ejemplo para comprobar que ya se puede utilizar FlexLayout.

<div fxLayout="row wrap"
     fxLayoutAlign="space-between">
  <div *ngFor="let i of [0,1,2,3,4,5]"
       [style]="{'background-color': getRandomColor()}"
       class="box">
  </div>
</div>

Estos son los simples pasos necesarios para instalar y configurar FlexLayout. El ejemplo mostrado puede ser encontrado en Github en el siguiente link.

Enlaces

Conclusiones

Espero que con estos simples pasos sea posible integrar FlexLayout en vuestros proyectos, tal y como lo he hecho yo en la mayoría de mis propios proyectos.