কৌণিক উইন্ডোর পুনরায় আকারের ইভেন্ট

Question

আমি উইন্ডো পুনঃ-আকারের ইভেন্টের উপর ভিত্তি করে কিছু কাজ সম্পাদন করতে চাই (লোডে এবং গতিশীলভাবে)।

বর্তমানে আমার ডিওএমটি নিম্নরূপ রয়েছে:

<div id="Harbour">
    <div id="Port" (window:resize)="onResize($event)" >
        <router-outlet></router-outlet>
    </div>
</div>

ঘটনাটি সঠিকভাবে আগুন ধরে

export class AppComponent {
   onResize(event) {
        console.log(event);
    }
}

আমি কীভাবে এই ইভেন্টের অবজেক্ট থেকে প্রস্থ এবং উচ্চতা পুনরুদ্ধার করব?

ধন্যবাদ।

Comments

আসলেই কৌণিক প্রশ্ন নয়। তাকান উইন্ডোতে অবজেক্ট। আপনি এটি innerHeightএবং innerWidthবৈশিষ্ট্যগুলি পেতে পারেন ..

— সাসকা

@ সাস্সা সঠিক, আপনার কেবল দরকারconsole.log(event.target.innerWidth )

— পঙ্কজ পার্কার

সাসকা / পঙ্কজ তথ্যের জন্য ধন্যবাদ - আমি নিশ্চিত ছিলাম না যে এটি কেবল একটি সরল জাভাস্ক্রিপ্ট জিনিস বা টাইপসক্রিপ্ট জিনিস বা একটি কৌণিক ঘটনা জিনিস কিনা। আমি এখানে নিজের জন্য খুব খাড়া শেখার বক্ররেখায় উঠছি এবং আপনার ইনপুটটির প্রশংসা করছি।

— DanAbdn

Answer 1

<div (window:resize)="onResize($event)"

onResize(event) {
  event.target.innerWidth;
}

বা হোস্টলিস্টনার সাজসজ্জার ব্যবহার করে :

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

সমর্থিত বিশ্বব্যাপী লক্ষ্যমাত্রা হয় window, documentএবং body।

অ্যাঙ্গুলারে https://github.com/angular/angular/issues/13248 প্রয়োগ না করা অবধি কার্য সম্পাদনের পক্ষে DOM ইভেন্টগুলিতে সাবস্ক্রাইব করা এবং অন্যান্য উত্তরের কয়েকটি হিসাবে বর্ণিত ইভেন্টের পরিমাণ হ্রাস করতে আরএক্সজেএস ব্যবহার করা ভাল।

Comments

আপনি যে সিনট্যাক্সটি ব্যবহার করছেন: উইন্ডো: রাইজাইজ ?

— ক্লিমেট

যথাযথভাবে। আপনি ব্যবহার করতে পারেন document, windowএবং body github.com/angular/angular/blob/...

— গুন্টার Zöchbauer

নিখুঁত উত্তর .. আমি বিশ্বাস করি @ হোস্টলিস্টনার ক্লিনার উপায় :) তবে প্রথমে হোস্টলিস্টনার আমদানি করার বিষয়টি নিশ্চিত করুনimport { Component, OnInit, HostListener } from '@angular/core';

— গৌরব শর্মা

দ্রুত টিপ: প্রথম লোডটিতেও ট্রিগার করতে চাইলে @ কৌনিক / কোর থেকে এনজিএফটারভিউআইনিটি প্রয়োগ করুন। Angular.io/api/core/AfterViewInit

— জিমোটিক

অবশ্যই, তবে, যারা ডিবাউনটাইম সহ হোস্টলিস্টনার কীভাবে জানতে চান তাদের জন্য, নীচের লিঙ্কটি অনুসরণ করুন plnkr.co/edit/3J0dcDaLTJBxkzo8Akyg?p= পূর্বরূপ

— jcdsr

Answer 2

@ গন্টারের উত্তর সঠিক। আমি কেবল আরও একটি পদ্ধতি প্রস্তাব করতে চেয়েছিলাম।

আপনি- @Component()ডিসকোরেটরের অভ্যন্তরে হোস্ট-বাইন্ডিং যুক্ত করতে পারেন । আপনি হোস্ট-মেটাডেটা-সম্পত্তিটিতে ইভেন্ট এবং কাঙ্ক্ষিত ফাংশন কলটি এমনভাবে রাখতে পারেন:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
    '(window:resize)': 'onResize($event)'
  }
})
export class AppComponent{
   onResize(event){
     event.target.innerWidth; // window width
   }
}

Comments

আমি এই পৃষ্ঠায় প্রতিটি পদ্ধতি চেষ্টা করেছি এবং দেখে মনে হয় এগুলির কোনওটিই কাজ করে না। এটি সম্পর্কে কোনও অফিসিয়াল ডকুমেন্টেশন আছে কি?

— টমেটো

লোডে ভিউপোর্টের উচ্চতা কীভাবে পাওয়া যায়?

— গিরিধর করণিক

@ গিরিধরকর্ণিক, আপনি কি window.innerWidthভিতরে ngOnInitবা ngAfterViewInitপদ্ধতিগুলি চেষ্টা করার চেষ্টা করেছেন ?

— জন

@ তোমাটো এপিআই-রেফারেন্সটি এখানে পাওয়া যাবে অনেকগুলি উল্লেখগুলি স্বয়ংক্রিয়ভাবে জড়িত (আমার ধারণা), এবং উদাহরণগুলির বা বিশদ ব্যাখ্যার অভাব রয়েছে। কিছু এপিআই-রেফারেন্সের প্রচুর উদাহরণ রয়েছে। যদিও এই সম্পর্কে ডক্সের কাছ থেকে আমি কোন নিদর্শন খুঁজে পাইনি। হতে পারে এটি কোথাও লুকিয়ে রয়েছে: পি

— জন

এখানে এটি কীভাবে ব্যবহৃত হবে তার একটি উল্লেখ

— আনন্দ রকজ

Answer 3

আমি জানি এটি অনেক আগে জিজ্ঞাসা করা হয়েছিল, তবে এখন এটি করার আরও ভাল উপায় আছে! আমি নিশ্চিত না যদিও কেউ এই উত্তরটি দেখতে পাবে কিনা। অবশ্যই আপনার আমদানি:

import { fromEvent, Observable, Subscription } from "rxjs";

তারপরে আপনার উপাদানগুলিতে:

resizeObservable$: Observable<Event>
resizeSubscription$: Subscription

ngOnInit() {
    this.resizeObservable$ = fromEvent(window, 'resize')
    this.resizeSubscription$ = this.resizeObservable$.subscribe( evt => {
      console.log('event: ', evt)
    })
}

তারপরে নিশ্চিন্তে সাবস্ক্রাইব করতে ভুলবেন না!

ngOnDestroy() {
    this.resizeSubscription$.unsubscribe()
}

Comments

একমাত্র উপায় যা আমার পক্ষে কাজ করেছে। ধন্যবাদ !! :-) ... আমাকে কেবল আপনার আমদানি সামঞ্জস্য করতে হয়েছিল। সম্ভবত আমার আরএক্সজেএস আরও নতুন:import { fromEvent, Observable,Subscription } from "rxjs";

— জেট

আমি এতে ডেবিউন (1000) কোথায় যুক্ত করতে পারি?

— দীপক থমাস

দেরী জবাবের জন্য দুঃখিত: অভিব্যক্তি যোগ করতে, আপনি ব্যবহার করতে চাইবেনthis.resizeSubscription$ = this.resizeObservable$.pipe(debounceTime(1000)).subscribe( evt => { console.log('event: ', evt) })

— ক্রিস স্ট্যানলি

Answer 4

এটি করার সঠিক উপায় হ'ল ইভেন্টটিকে বাঁধার জন্য ইভেন্ট ম্যানেজার ক্লাসটি ব্যবহার করা । এটি আপনার কোডকে বিকল্প প্ল্যাটফর্মগুলিতে কাজ করার অনুমতি দেয়, উদাহরণস্বরূপ অ্যাংুলার ইউনিভার্সাল সহ সার্ভার সাইড রেন্ডারিং।

import { EventManager } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Injectable } from '@angular/core';

@Injectable()
export class ResizeService {

  get onResize$(): Observable<Window> {
    return this.resizeSubject.asObservable();
  }

  private resizeSubject: Subject<Window>;

  constructor(private eventManager: EventManager) {
    this.resizeSubject = new Subject();
    this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this));
  }

  private onResize(event: UIEvent) {
    this.resizeSubject.next(<Window>event.target);
  }
}

কোনও উপাদান ব্যবহারের জন্য এই অ্যাপ্লিকেশনটি আপনার অ্যাপ.মডিউলে সরবরাহকারীর হিসাবে এই পরিষেবাটি যুক্ত করা এবং তারপরে এটি কোনও উপাদানটির কনস্ট্রাক্টরে আমদানি করার মতোই সহজ।

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

@Component({
  selector: 'my-component',
  template: ``,
  styles: [``]
})
export class MyComponent implements OnInit {

  private resizeSubscription: Subscription;

  constructor(private resizeService: ResizeService) { }

  ngOnInit() {
    this.resizeSubscription = this.resizeService.onResize$
      .subscribe(size => console.log(size));
  }

  ngOnDestroy() {
    if (this.resizeSubscription) {
      this.resizeSubscription.unsubscribe();
    }
  }
}

Comments

যতদূর আমি বলতে পারি এটি মোবাইলে কখনও আগুন দেয় না। এই পদ্ধতির সাহায্যে আপনি প্রাথমিক উইন্ডো আকারটি কীভাবে পাবেন?

— ব্যবহারকারী 3170530

মোবাইল একটি নেই windowবস্তু, একটি সার্ভার হল এমন একটি নেই ঠিক যেমন window। আমি বিভিন্ন মোবাইল কনফিগারেশনের সাথে পরিচিত নই তবে আপনি সঠিক গ্লোবাল ইভেন্ট শ্রোতার সাথে আবদ্ধ হওয়ার জন্য উপরের কোডটি সহজেই মানিয়ে নিতে সক্ষম হবেন

— cgatian

@ Cgatian আমি নুব কিন্তু এটি সঠিক উত্তর বলে মনে হচ্ছে। দুর্ভাগ্যবশত আমি আমার সাবস্ক্রিপশন তৈরি করার ভাগ্য পাচ্ছি না এই উপাদানটিতে লগইন করুন। আপনি কীভাবে কোনও অংশে এটিতে সাবস্ক্রাইব করবেন সেই উত্তরে আপনি যুক্ত করতে পারেন যাতে কোনও আপডেটগুলি দেখতে পারে?

— ম্যাথু হারউড

@ সিগাটিয়ান আমি একটি প্লাঙ্কার বানাব তবে এটি কাজ করবে না বলে মনে হয়েছিল। পরিষেবাটির ফিল্টারটি অদ্ভুত বলে মনে হচ্ছে স্ট্যাকওভারফ্লো.com

— ম্যাথু হারউড

@ সিগাটিয়ান Mobile does not have a window object.... আপনি কী ভাবেন যে মোবাইল ব্রাউজারগুলির উইন্ডো অবজেক্ট নেই?

— ড্রেনাই

Answer 5

এটি করার আরও ভাল উপায় এখানে। বিরোস্কির উত্তরের ভিত্তিতে ।

পদক্ষেপ 1: angular serviceআরএক্সজেএস পর্যবেক্ষণযোগ্যগুলির সাথে একটি তৈরি করুন ।

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable()
export class WindowService {
    height$: Observable<number>;
    //create more Observables as and when needed for various properties
    hello: string = "Hello";
    constructor() {
        let windowSize$ = new BehaviorSubject(getWindowSize());

        this.height$ = (windowSize$.pluck('height') as Observable<number>).distinctUntilChanged();

        Observable.fromEvent(window, 'resize')
            .map(getWindowSize)
            .subscribe(windowSize$);
    }

}

function getWindowSize() {
    return {
        height: window.innerHeight
        //you can sense other parameters here
    };
};

পদক্ষেপ 2: উপরের ইনজেক্ট করুন serviceএবং Observablesআপনি উইন্ডোর পুনরায় আকারের ইভেন্টটি পেতে যেখানেই চাইলে পরিষেবাটির মধ্যে তৈরি যে কোনওটির সাবস্ক্রাইব করুন ।

import { Component } from '@angular/core';
//import service
import { WindowService } from '../Services/window.service';

@Component({
    selector: 'pm-app',
    templateUrl: './componentTemplates/app.component.html',
    providers: [WindowService]
})
export class AppComponent { 

    constructor(private windowService: WindowService) {

        //subscribe to the window resize event
        windowService.height$.subscribe((value:any) => {
            //Do whatever you want with the value.
            //You can also subscribe to other observables of the service
        });
    }

}

প্রতিক্রিয়াশীল প্রোগ্রামিংয়ের একটি দৃ understanding় বোঝা সর্বদা কঠিন সমস্যা কাটিয়ে উঠতে সহায়তা করবে। আশা করি এটি কাউকে সাহায্য করবে।

Comments

আমি বিশ্বাস করি এটি একটি ত্রুটি: এটি.ইাইট $ = (উইন্ডোজ সাইজ $। প্লাক ('উচ্চতা') হিসাবে পর্যবেক্ষণযোগ্য <নাম্বার>) ist; দেখে মনে হচ্ছে আপনি পর পর দু'বার স্বতন্ত্র চ্যাঞ্জড () এ পেস্ট করেছেন

— জুরিল

আমি আপনাকে পেলাম না, দয়া করে সুস্পষ্ট।

— গিরিধর করণিক

আপনি এই অনুষ্ঠানটি কৌণিকের বাইরে করছেন বলে পরিবর্তন সনাক্তকরণকে বরখাস্ত করা হবে না, বিশ্বাস করুন যে সে এর অর্থ কি।

— মার্ক পাইসাক - ট্রিলন.ও

'প্লাক' বলার ক্ষেত্রে ত্রুটি হয়েছিল যে আচরণ বিহীন ধরণের টাইপটিতে নেই। কোডটি এইটিতে পরিবর্তন করা he = উইন্ডোজ সাইজ $। ম্যাপ (x => x.height) আমার পক্ষে কাজ করেছে।

— ম্যাট সুগডেন

@ গিরিধারকিক আপনি কি এমন একটি সমাধান দিতে পারেন যা একই সময়ে প্রস্থ এবং উচ্চতায় সাবস্ক্রাইব করবে, যা আমরা প্রস্থ, উচ্চতা উভয়কেই 1 টি সাধারণ সাবস্ক্রাইব করতে পারি

— গিসকডিং

Answer 6

আমি কারো কথা বলা দেখা যায় না MediaMatcherএর angular/cdk।

আপনি একটি মিডিয়াকিউরি সংজ্ঞায়িত করতে এবং এটির সাথে একটি শ্রোতা সংযুক্ত করতে পারেন - তবে ম্যাচারের সাথে মিল থাকলে আপনার টেম্পলেট (বা টিএসএস) এর যে কোনও জায়গায় আপনি স্টাফ চাইতে পারেন। LiveExample

App.Component.ts

import {Component, ChangeDetectorRef} from '@angular/core';
import {MediaMatcher} from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mobileQuery: MediaQueryList;

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  private _mobileQueryListener: () => void;

  ngOnDestroy() {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }

}

App.Component.Html

<div [class]="mobileQuery.matches ? 'text-red' : 'text-blue'"> I turn red on mobile mode 
</div>

App.Component.css

.text-red { 
   color: red;
}

.text-blue {
   color: blue;
}

উত্স: https://matory.angular.io/components/sidenav/overview

Answer 7

ধরে নিই যে <600px অর্থ আপনার কাছে মোবাইল, আপনি এটি পর্যবেক্ষণযোগ্য ব্যবহার করতে পারেন এবং এটিতে সাবস্ক্রাইব করতে পারেন:

প্রথমে আমাদের বর্তমান উইন্ডো আকারের প্রয়োজন। সুতরাং আমরা একটি পর্যবেক্ষণযোগ্য তৈরি করি যা কেবলমাত্র একক মান: বর্তমান উইন্ডোর আকারকে নির্গত করে।

initial$ = Observable.of(window.innerWidth > 599 ? false : true);

তারপরে আমাদের আর একটি পর্যবেক্ষণযোগ্য তৈরি করতে হবে, যাতে উইন্ডোর আকারটি কখন পরিবর্তন করা হয়েছিল তা আমরা জানতে পারি। এর জন্য আমরা "fromEvent" অপারেটরটি ব্যবহার করতে পারি। Rxjs`s অপারেটর সম্পর্কে আরও জানতে দয়া করে দেখুন: rxjs

resize$ = Observable.fromEvent(window, 'resize').map((event: any) => {
  return event.target.innerWidth > 599 ? false : true;
 });

আমাদের পর্যবেক্ষণযোগ্য পেতে এই দুটি স্ট্রিমটি মার্জ করুন:

mobile$ = Observable.merge(this.resize$, this.initial$).distinctUntilChanged();

এখন আপনি এটির মতো সাবস্ক্রাইব করতে পারেন:

mobile$.subscribe((event) => { console.log(event); });

সাবস্ক্রাইব করতে ভুলবেন না :)

Answer 8

কৌণিক সিডিকেতে একটি ভিউপোর্টরুলার পরিষেবা রয়েছে। এটি জোনটির বাইরে চলে এবং সার্ভার সাইড রেন্ডারিংয়ের সাথেও কাজ করে।

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। প্রয়োজনীয় সমস্ত কিছু আছে + এটি কৌনিক সিডিকে ইনবিল্ট কার্যকারিতা।

— ডেনিস এম

Answer 9

@Cgatian এর সমাধানের ভিত্তিতে আমি নিম্নলিখিত সরলীকরণের পরামর্শ দেব:

import { EventManager } from '@angular/platform-browser';
import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class ResizeService {

  public onResize$ = new EventEmitter<{ width: number; height: number; }>();

  constructor(eventManager: EventManager) {
    eventManager.addGlobalEventListener('window', 'resize',
      e => this.onResize$.emit({
        width: e.target.innerWidth,
        height: e.target.innerHeight
      }));
  }
}

ব্যবহার:

import { Component } from '@angular/core';
import { ResizeService } from './resize-service';

@Component({
  selector: 'my-component',
  template: `{{ rs.onResize$ | async | json }}`
})
export class MyComponent {
  constructor(private rs: ResizeService) { }
}

Comments

আমি এটি সেরা সমাধান হিসাবে পেয়েছি, তবে এটি কেবল তখন উইন্ডোটিকে পুনরায় আকার দেওয়ার সময় কাজ করে, তবে কখন লোড হয় না বা রাউটার পরিবর্তিত হয়। আপনি কি জানেন, রাউটার পরিবর্তন, পুনরায় লোড বা লোড দিয়ে কীভাবে প্রয়োগ করবেন?

— জেসিডিএসআর

আপনি পরিষেবাটিতে একটি ফাংশন যুক্ত করতে পারেন এবং এটি উপাদানটিকে @ jcdsr: getScreenSize () {this.onResize $ .emit ({প্রস্থ: window.innerWidth, উচ্চতা: window.innerHeight in) এ ট্রিগার করতে পারেন; }

— ড্যানিয়েলওয়াহ

Answer 10

এটি প্রশ্নের সঠিক উত্তর নয় তবে এটি এমন কাউকে সহায়তা করতে পারে যাকে যে কোনও উপাদানগুলির আকার পরিবর্তনগুলি সনাক্ত করতে হবে।

আমি একটি লাইব্রেরি তৈরি করেছি যা resizedকোনও উপাদানগুলিতে ইভেন্ট যুক্ত করে - Angular Resize ইভেন্ট ।

এটি অভ্যন্তরীণভাবে CSS এলিমেন্ট ক্যোয়ারীResizeSensor থেকে ব্যবহার করে ।

ব্যবহারের উদাহরণ

এইচটিএমএল

<div (resized)="onResized($event)"></div>

টাইপরাইটারে মুদ্রি

@Component({...})
class MyComponent {
  width: number;
  height: number;

  onResized(event: ResizedEvent): void {
    this.width = event.newWidth;
    this.height = event.newHeight;
  }
}

Comments

আপনি যদি উইন্ডোর আকার পরিবর্তন করতে চান তবে কৌণিক পদার্থের

— ড্যারেন স্ট্রিট

তবে এটি কেবল উইন্ডোজের আকার পরিবর্তন করতে পারে না, তবে যে কোনও উপাদানগুলির আকার পরিবর্তন করে।

— মার্টিন ভোলেক

Answer 11

আমি কৌনিকটিতে একবার উপাদান সীমানা আকার পরিবর্তন (আকার পরিবর্তন) খুঁজতে এই লিবিটি লিখেছিলাম , এটি অন্য লোকেদের সহায়তা করতে পারে। আপনি এটি মূল উপাদানটিতে রাখতে পারেন, উইন্ডো আকার পরিবর্তন হিসাবে একই কাজ করবে।

পদক্ষেপ 1: মডিউলটি আমদানি করুন

import { BoundSensorModule } from 'angular-bound-sensor';

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

পদক্ষেপ 2: নীচের মত নির্দেশ যুক্ত করুন

<simple-component boundSensor></simple-component>

পদক্ষেপ 3: সীমানা আকার বিশদ গ্রহণ করুন

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

@Component({
  selector: 'simple-component'
  (...)
})
class SimpleComponent {
  @HostListener('resize', ['$event'])
  onResize(event) {
    console.log(event.detail);
  }
}

Answer 12

অ্যাঙ্গুলার 2 এ (2.1.0) আমি স্ক্রিন পরিবর্তন ইভেন্ট ক্যাপচার জন্য এনজিউন ব্যবহার করি।

উদাহরণটি একবার দেখুন:

import { Component, NgZone } from '@angular/core';//import ngZone library
...
//capture screen changed inside constructor
constructor(private ngZone: NgZone) {
    window.onresize = (e) =>
    {
        ngZone.run(() => {
            console.log(window.innerWidth);
            console.log(window.innerHeight);
        });
    };
}

আমি এই সাহায্য আশা করি!

Answer 13

নীচে কোডটি কৌণিক ক্ষেত্রে প্রদত্ত ডিভের জন্য কোনও আকারের পরিবর্তন পর্যবেক্ষণ করতে দেয়।

<div #observed-div>
</div>

তারপরে কম্পোনেন্টে:

oldWidth = 0;
oldHeight = 0;

@ViewChild('observed-div') myDiv: ElementRef;
ngAfterViewChecked() {
  const newWidth = this.myDiv.nativeElement.offsetWidth;
  const newHeight = this.myDiv.nativeElement.offsetHeight;
  if (this.oldWidth !== newWidth || this.oldHeight !== newHeight)
    console.log('resized!');

  this.oldWidth = newWidth;
  this.oldHeight = newHeight;
}

Comments

সর্বাধিক প্রস্থ 767px এ আমি কাউন্টার = 6 থেকে গণনা = 0 থেকে একটি ভেরিবেল পরিবর্তন করতে চাই, আমি কীভাবে এটি করব?

— থানভীর শাহ

Answer 14

সমস্ত সমাধান সার্ভার-সাইড বা কৌণিক সার্বজনীন মধ্যে কাজ করছে না

Answer 15

আমি এই উত্তরগুলির বেশিরভাগটি পরীক্ষা করে দেখেছি। তারপর কৌণিক ডকুমেন্টেশন খুঁজে বার করো করার সিদ্ধান্ত নিয়েছে লেআউট ।

বিভিন্ন মাপ শনাক্ত করার জন্য কৌণিকের নিজস্ব পর্যবেক্ষক রয়েছে এবং উপাদান বা কোনও পরিষেবাতে এটি প্রয়োগ করা সহজ।

এর সরল উদাহরণ হ'ল:

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

@Component({...})
class MyComponent {
  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.HandsetLandscape,
      Breakpoints.HandsetPortrait
    ]).subscribe(result => {
      if (result.matches) {
        this.activateHandsetLayout();
      }
    });
  }
}

আশা করি এটা সাহায্য করবে