Проекты на Angular

Была поставлена задача создать адаптивный макет; однако мне не разрешили воспользоваться помощью медиа запросов CSS ; с другой стороны, я не должен был использовать директиву *ngIf при изменении размера окна.

Итак, я решил использовать Angular для определение размера окна с помощью API HostListener.

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

В Angular получение размера окна в реальном времени при изменении размера экрана невероятно просто. В этом проекте мы узнаем, как определить ширину и высоту экрана в Angular с помощью декоратора HostListener.

HostListener - это декоратор, используемый для прослушивания DOM, и он предоставляет метод обработчика для запуска при возникновении этого события.

Angular вызывает предоставленный метод обработчика, когда хост-элемент генерирует именованное событие и обновляет связанный элемент результатом.

Итак, давайте начнем и разберемся, как получить высоту и ширину окна в приложении Angular 13.

• Шаг 1: Установите интерфейс командной строки Angular
• Шаг 2: Загрузите проект Angular
• Шаг 3: Обновить шаблон компонента
• Шаг 4: Обновить HTML-шаблон
• Шаг 5: Запустить приложение Angular

Разработка Angular основана исключительно на интерфейсе командной строки Angular; вы должны убедиться, что у вас установлен необходимый инструмент.

Если нет, то выполните команду для установки интерфейса командной строки Angular (CLI).

npm install -g @angular/cli

На этом этапе вам необходимо загрузить приложение angular с помощью приведенной ниже команды.

Однако вы можете полностью пропустить этот шаг, если установили приложение заранее.

ng new ng-demo

Затем перейдите в каталог проекта.

cd ng-demo

npm install bootstrap

Добавьте CSS начальной загрузки в файл angular.json:

...
...
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
],
...
...

Импортируйте API-интерфейс HostListener из пакета "@angular/core", определите переменные getScreenWidth и getScreenHeight, используйте HostListener для привязки окна к событию изменения размера, чтобы получить размер и ширину экрана при изменении размера окна.

Обновите код в файле src/app/app.component.ts.

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  public getScreenWidth: any;
  public getScreenHeight: any;
  
  ngOnInit() {
      this.getScreenWidth = window.innerWidth;
      this.getScreenHeight = window.innerHeight;
  }
  
  @HostListener('window:resize', ['$event'])

  onWindowResize() {
    this.getScreenWidth = window.innerWidth;
    this.getScreenHeight = window.innerHeight;
  }
  
}

На этом шаге вам нужно открыть файл шаблона HTML angular и определить переменные с помощью двойных фигурных скобок для вывода размера экрана или окна в браузере.

Пожалуйста, обновите код в файле src/app/app.component.html.

<div class="container text-center mt-5">
  
  <h3 class="text-center btn-primary mt-3 mb-3 pt-2 pb-2" >Angular 13 Определение ширины и высоты экрана</h3>

  <div class="text-center btn-success btn-lg btn-block mt-3 mb-3 pt-2 pb-2">Ширина экрана: {{ getScreenWidth }}</div>
  <div class="text-center btn-success btn-lg btn-block mt-3 mb-3 pt-2 pb-2">Высота экрана: {{ getScreenHeight }}</div>

</div>

Все необходимые шаги были выполнены, теперь вам нужно ввести заданную команду и нажать enter, чтобы запустить сервер приложений angular.

ng serve

Теперь откройте браузер, введите указанный URL-адрес, нажмите "Ввод" и просмотрите размер экрана при изменении размера окна в angular.

http://localhost:4200

В этом Angular проекте мы выполнили важные шаги и узнали, как получить адаптивные размеры экрана, когда пользователь изменяет размер окна или изменяет размер экрана.