רספונסיביות ב Anggular Material?

[ari rm]

בס"ד

בד"כ בשביל רספונסיביות משתמשים ב bootstrap,
ואני אכן משתמש ב bootstrap,
אבל אני רוצה לקבוע ערך ברירת מחדל באלמנטים של material לפי רספונסיביות,
איך הדרך המקובלת לעשות את זה,
ישנה אפשרות להכפיל אותם ולהסתיר, השאלה האם זו הדרך, א"כ אשמח לקבל דוגמא לכתוב את זה בצורה נקייה,
או שיש דרכים אחרות שהן מקובלות?

<mat-drawer-container class="example-container h-100" >
    <mat-drawer #drawer class="bg-dark" mode="side" >
      <span>greate to menu</span>
    </mat-drawer>
    <mat-drawer-content>
    <mat-toolbar class="navbar sticky-top s_theme p-0 m-0">
        <app-menu-top class="container-fluid m-0 p=0"></app-menu-top>
    </mat-toolbar>

    <div class="container-fluid h-100 s_bode">

  <h1>ברוכים הבאים לארגון XXXX - מתנדבים!</h1>

  </div>
  <router-outlet></router-outlet>
    </mat-drawer-content>
  </mat-drawer-container>

למשל בדוגמא הנ"ל:
אני מביא את העיקרי ואת מה שנפתח (מגירה)
ברירת מחדל שמתי את הנפתח פתוח (opened) איך מבטלים את זה כשזה סמרטפון (בbpptstrap = sm)
והmode שווה side איך הופכים ל Over
והhasBackdrop שווה false איך הופכים ל true

תודה לכל המסייעים.

 

[אסתר א]

דוגמאות של איך לעשות binding לגודל המסך הנוכחי ב bootstrap:
Detect Responsive Screen Sizes in Angular | DigitalOcean

Detecting real time window size changes in Angular 4

I have been trying to build a responsive nav-bar and do not wish to use a media query, so I intend to use *ngIf with the window size as a criterion. But I have been facing a problem as I am unable to

stackoverflow.com

דוגמא מתחכמת, אהבתי במיוחד: https://stackoverflow.com/a/49250727

ברגע שיש לך binding מול הvalue הזה, תוכל לפתוח ולסגור בהתאמה כמובן

אבל הייתי הולכת על הכיוון של media-query ב CSS
מבחינת פרפורמנס
מה שאומר שכאשר זה סמארטפון, הCSS המתאים ירוץ ויעשה את ההסתרה של הסלייד
משהו כזה:

@media (min-width: 780px) {
        .drawer {
            width: 90% !important; // material-ui uses vw so 90vw works too
            transform: translate(-100%, 0px) !important; // translate(-90vw, 0px)
        }
        .drawer.open {
            transform: translate(0, 0px) !important;
        }
    }

 

[ari rm]

בס"ד

בעיקרון הציעו לי כבר את הדרך הישרה שאמורה להיות ב אנגולר,

How To Detect Breakpoints Using the Angular CDK | DigitalOcean

Learn how to detect viewport size changes or matches against media queries using the BreakpointObserver and MediaMatcher services from the Angular CDK.

www.digitalocean.com

אבל בגלל שזה היה נראה לי מסובך, (כנראה בגלל שזה בנוי עם Observer).

אז עבדתי בצורה הזאת (די מזכיר את הדוגמא לעיל):

• ביקשתי ב את הערך מsericve של seting(שיצרתי לבד - לא מובנה).
• והפעלתי פונקציה בכל שינוי של המסך, שמשנה את הערכים בservice.

מצו' קטע קוד דוגמא:

    window.onresize = () => {
      ngZone.run(() => {
          this.changeMode();
      });
    };
   }

  ngOnInit(): void {
    this.changeMode();
  }

  changeMode() {
    this.settings.drawer.width = window.innerWidth;
    this.settings.drawer.height = window.innerHeight;
    if(this.settings.drawer.width <= 800) {
        this.settings.drawer.mode = 'over';
        this.settings.drawer.open = 'false';
        this.settings.drawer.hasBackdrop = 'true';
    }
    if(this.settings.drawer.width > 800) {
        this.settings.drawer.mode = 'side';
        this.settings.drawer.open = 'true';
        this.settings.drawer.hasBackdrop = 'false';
    }
  }