Angular CDK Layout - как удобный помощник при разработке адаптивных Angular приложений

В закладки

В процессе разработки адаптивных UI многие разработчики сталкиваются с ситуациями, когда нужно понимать с каким размером окна в текущий момент работает ваш Angular SPA (Single Page Application) для того чтобы соответственно реагировать или изменять пользовательский интерфейс.

Angular Material CDK - предлагает пакет Layout который позволит вам получить текущую информацию о размере окна, а также подписываться на его изменения.

В состав пакета CDK Layout входят сервисы которые позволяют определить размер окна сопоставимо с медиа запросами в css.

Как использовать модуль CDK Layout :

Первым делом вы должны установить Angular Material CDK в ваше Angular приложение:

npm install @angular/cdk // или yarn add @angular/cdk

Затем импортируйте LayoutModule и добавьте его в imports вашего NgModule

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

Теперь вы можете использовать сервисы CDK Layout в ваших компонентах.

Подробно о функционале который предлагает модуль Layout :

1. BreakpointObserver

BreakpointObserver - это сервис в котором существует два метода observe и isMatched

BreakpointObserver.isMatched - является методом который возвращает boolean значение и в который нужно передать в виде аргумента медиа запрос или массив медиа запросов.

Пример использования в компоненте:

import {Component, OnInit} from '@angular/core'; import {BreakpointObserver} 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(['(max-width: 400px)', '(min-width: 900px)'])) { console.log('isMatched'); } } }

В темплейте:

<div *ngIf="breakpointObserver.isMatched(['(min-width: 900px)'])"> <h1>isMatched</h1> </div>

В примере выше в компоненте - мы увидим в консоли надпись isMatched в том случае если при инициализации компонента при событии ngOnInit, любой из css медиа запросов в массиве будет удовлетворен.

Во втором примере в темплейте - мы увидим блок div только в том случае если ширина окна будет больше чем 900px.

BreakpointObserver.observe :

Метод observe возвращает observable типа BreakpointState на который мы можем подписаться и получать информацию об изменении размеров окна в соответствии с заданным медиа запросом или массивом медиа запросов.

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: 960px)']) .subscribe((state: BreakpointState) => { if (state.matches) { console.log('Viewport is 960px or over!'); } else { console.log('Viewport is getting smaller!'); } }); } }

В примере выше мы будем видеть в консоли сообщения если экран пользователя будет становиться больше или меньше 960px.

Хочу заметить что интерфейс BreakpointState выглядит следующим образом :

export interface BreakpointState { matches: boolean; breakpoints: { [key: string]: boolean; }; }

Из этого можно сделать вывод, что поле matches будет true - если хотя бы один из переданных медиа запросов будет удовлетворен. Соответственно если мы хотим получать информацию только по конкретному переданному медиа запросу - мы можем сделать так:

ngOnInit() { this.breakpointObserver .observe(['(min-width: 960px)', '(min-width: 1060px)']) .subscribe((state: BreakpointState) => { if (state.breakpoints['(min-width: 1060px)']) { console.log('Viewport is 1060px or over!'); } }); }

Дополнительно мы можем использовать объект Breakpoints, в котором уже есть фиксированные брейкпоинты в соответствии со спецификацией Google's Material Design

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.TabletPortrait]) .subscribe((state: BreakpointState) => { if (state.matches) { console.log('Viewport is TabletPortrait!'); } }); } }

2. MediaMatcher

MediaMatcher - это сервис, который является оберткой над нативным методом JavaScript matchMedia. Его можно использовать так же как и BreakpointObserver.observe для наблюдения за изменением размера окна в зависимости от заданного медиа запроса.

import {Component, OnDestroy, OnInit} 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: 960px)'); this.matcher.addListener(this.myListener); } myListener(event) { if (event.matches) { console.log('match'); } else { console.log('no match'); } } ngOnDestroy() { this.matcher.removeListener(this.myListener); } }

Разница между BreakpointObserver.observe и MediaMatcher заключается в том что MediaMatcher предоставляет вам доступ к нативному JS объекту MatchQueryList, в некоторых случаях это может быть полезно.

Теперь, я надеюсь у вас есть полное понимание как пользоваться Angular CDK Layout для создания своих адаптивных Angular UI. =)

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Андрей Бурмицкий", "author_type": "self", "tags": [], "comments": 0, "likes": 0, "favorites": 3, "is_advertisement": false, "subsite_label": "dev", "id": 75750, "is_wide": false, "is_ugc": true, "date": "Thu, 18 Jul 2019 11:26:12 +0300" }
{"average":28374,"one":95,"ten":76}
Сколько денег вы откладываете в месяц?
Ответьте и узнаете, сколько копят другие.
0 ₽
70 000+ ₽
0 ₽
{ "id": 75750, "author_id": 326884, "diff_limit": 1000, "urls": {"diff":"\/comments\/75750\/get","add":"\/comments\/75750\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/75750"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 235819, "last_count_and_date": null }
Комментариев нет

Популярные

По порядку

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }