Cómo detectar puntos de interrupción con Angular CDK

Introducción

El CDK de Angular tiene un paquete de diseño con servicios para detectar tamaños de ventanas gráficas y coincidencias con consultas de medios. Esto le permite tener un control total sobre la interfaz de usuario y adaptarse a diferentes tamaños de pantalla.

En este artículo, aplicará el módulo de diseño del CDK en proyectos Angular.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Este tutorial también asumirá que lo has @angular/cliinstalado globalmente.
• Algunos conocimientos de consultas de medios CSS .

Este tutorial fue verificado con Node v16.6.1, npm7.20.3, @angular/corev12.2.0 y @angular/cdkv12.2.0.

Configuración del proyecto

Puedes usarlo @angular/clipara crear un nuevo proyecto Angular.

En su ventana de terminal, utilice el siguiente comando:

ng new AngularBreakpointsExample --style=css --routing=false --skip-tests

Esto configurará un nuevo proyecto Angular con estilos establecidos en “CSS” (a diferencia de “Sass”, Less” o “Stylus”), sin enrutamiento y sin omitir pruebas.

Navegue hasta el directorio del proyecto recién creado:

cd AngularBreakpointsExample

A continuación, instale @angular/cdk:

npm install @angular/cdk@12.2.0

Luego, importe el módulo de diseño y agréguelo a la lista de importaciones de su NgModule:

src/app/app.module.ts

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { LayoutModule } from '@angular/cdk/layout';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    LayoutModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

Ahora puede comenzar a utilizar los servicios y utilidades disponibles en sus componentes. Analicemos cada uno de ellos.

Usando BreakpointObserver.observeyBreakpointState

El observemétodo devuelve un observable de tipo BreakpointStatey se puede utilizar para observar cuándo la ventana gráfica cambia entre coincidir con una consulta de medios o no.

A continuación se muestra un ejemplo en el que se registra un mensaje en la consola si el tamaño de la ventana gráfica cambia entre un valor inferior a 500 px e igual o superior a 500 px:

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';import {  BreakpointObserver,  BreakpointState} from '@angular/cdk/layout';@Component({   selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit {  constructor(public breakpointObserver: BreakpointObserver) {}    ngOnInit() {    this.breakpointObserver      .observe(['(min-width: 500px)'])      .subscribe((state: BreakpointState) = {        if (state.matches) {          console.log('Viewport width is 500px or greater!');        } else {          console.log('Viewport width is less than 500px!');        }      });  }}

Nota: Es posible que también tengas que eliminarlo {{ title }}para app.component.htmlevitar un error.

La BreakpointStateinterfaz nos da una propiedad booleana llamada matches.

UsandoBreakpoints

En lugar de utilizar consultas de medios escritas a mano, también podemos utilizar el Breakpointsobjeto, que nos proporciona claves para puntos de interrupción comunes:

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';import {  BreakpointObserver,  Breakpoints,  BreakpointState} from '@angular/cdk/layout';@Component({   selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit {  constructor(public breakpointObserver: BreakpointObserver) {}  ngOnInit() {    this.breakpointObserver      .observe([Breakpoints.Small, Breakpoints.HandsetPortrait])      .subscribe((state: BreakpointState) = {        if (state.matches) {          console.log(            'Matches small viewport or handset in portrait mode'          );        }      });  }}

Este ejemplo utiliza los puntos de interrupción predefinidos para Breakpoints.Smally Breakpoints.HandsetPortrait.

UsandoBreakpointObserver.isMatched

Para una coincidencia única, podemos utilizar el isMatching methoden su lugar.

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';import {  BreakpointObserver,  BreakpointState} from '@angular/cdk/layout';@Component({   selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit {  constructor(public breakpointObserver: BreakpointObserver) {}  ngOnInit() {    if (this.breakpointObserver.isMatched('(min-height: 40rem)')) {      console.log('Viewport has a minimum height of 40rem!');    }  }}

Esto registrará un mensaje si la ventana gráfica tiene al menos 40 rem de altura cuando se inicializa el componente.

UsandoMediaMatcher

MediaMatcheres un servicio que envuelve a JavaScript matchMedia. Al igual que con BreakpointObserver.observe, también se puede utilizar para observar cambios en el tamaño de la ventana gráfica en relación con una consulta de medios determinada.

A continuación se muestra un ejemplo que comprueba si min-widthes 500pxancho:

src/aplicación/aplicación.componente.html

import { Component, OnInit, OnDestroy } from '@angular/core';import { MediaMatcher } from '@angular/cdk/layout';@Component({   selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit, OnDestroy {  matcher!: MediaQueryList;  constructor(public mediaMatcher: MediaMatcher) {}  ngOnInit() {    this.matcher = this.mediaMatcher.matchMedia('(min-width: 500px)');    this.matcher.addEventListener('change', this.myListener);  }  ngOnDestroy() {    this.matcher.removeEventListener('change', this.myListener);  }  myListener(event: { matches: any; }) {    console.log(event.matches ? 'match' : 'no match');  }}

La diferencia con BreakpointObserver.observees que MediaMatchernos da acceso al MatchQueryListobjeto nativo , lo que puede ser necesario en ciertos escenarios.

Nota: Anteriormente, este ejemplo utilizaba addListenery removeListener. addListenerestá en desuso y addEventListenerse recomienda para navegadores modernos. Y removeListenerestá en desuso y removeEventListenerse recomienda para navegadores modernos.

Ahora tienes todo lo que necesitas para reaccionar o adaptar tu UI a diferentes tamaños de ventanas gráficas en Angular.

Conclusión

En este artículo, se aplicó el módulo de diseño del CDK en proyectos Angular.

Continúe su aprendizaje con la documentación de referencia de API del módulo de diseño del CDK .