Làm thế nào để bạn kiểm soát kích thước của một phần tử khi thay đổi kích thước cửa sổ trong một thành phần?

Để kiểm soát kích thước của một phần tử khi thay đổi kích thước cửa sổ trong một thành phần Angular, bạn có thể sử dụng một số phương pháp khác nhau. Dưới đây là hai phương pháp phổ biến:

1. Sử dụng HostListener:

Bạn có thể sử dụng trình bao nghe sự kiện HostListener để lắng nghe sự kiện thay đổi kích thước cửa sổ và sau đó cập nhật kích thước của phần tử tương ứng. Dưới đây là một ví dụ về cách thực hiện:

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

@Component({
  selector: 'app-resizable',
  template: `
    <div class="resizable" [style.width.px]="width" [style.height.px]="height">
      <h1>Geeks For Geeks!</h1>
      Cách kiểm soát kích thước
    </div>
  `,
  styleUrls: ['./resizable.component.css']
})
export class ResizableComponent {
  width = 400;
  height = 300;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.width = event.target.innerWidth;
    this.height = event.target.innerHeight;
  }
}

Trong ví dụ trên, mỗi khi cửa sổ được thay đổi kích thước, phương thức onResize sẽ được gọi và cập nhật kích thước của phần tử div tương ứng[2].

2. Sử dụng Angular Resize Event:

Một phương pháp khác là sử dụng gói angular-resize-event từ NPM, cho phép bạn dễ dàng lắng nghe sự kiện thay đổi kích thước của phần tử. Đầu tiên, bạn cần cài đặt gói này:

npm install angular-resize-event

Sau đó, bạn có thể sử dụng directive resized để lắng nghe sự kiện thay đổi kích thước và xử lý nó trong thành phần của mình:

import { Component } from '@angular/core';
import { ResizedEvent } from 'angular-resize-event';

@Component({
  selector: 'my-component',
  template: `<div (resized)="onResized($event)"></div>`
})
export class MyComponent {
  onResized(event: ResizedEvent) {
    console.log('New widt...