*ngIf masquer certains contenus sur écran mobile, Angulaire 4

J'ai:

showHide: false;

<div *ngIf="showHide">
  Content
</div>

<button (click)="showHide = !showMap">
  Button visited only max-width: 768px
</button>

Dans MAX-width: 768px, j'ai un bouton. Sur MIN-width: 768px bouton masquer.
Quand je clique sur le bouton afficher un DIV.
Il fonctionne bien.

MAIS

Comment faire *ngIf travail uniquement lorsque MAX-width: 768px?

max-height: 768px

  • bouton display: block
  • DIV display: none (mais quand je clique sur le bouton = affichage de:
    bloc)

min-height: 768px:

  • bouton display: none
  • DIV display: block

Au moment où je redimensionner à partir de l'exemple 500px de 1000px:
Il dépend de bouton, j'ai appuyé sur

C'est mieux fait via CSS qu'avec Angulaires, il suffit d'utiliser une requête de média pour masquer l'élément.
Pas de CSS. Au moment où je redimensionner à partir de l'exemple 500px de 1000px: Cela dépend de qui j'ai appuyé sur le bouton, et MIN-height; 768px - affichermasquer est faux DONC je n'ai pas de DIV de contenu
Lorsque 500px je ne cliquez pas sur le bouton - je n'ai pas de DIV. Mais quand je le redimensionner à 1000px - je n'ai pas de DIV, mais je veux DIV sur le min-height: 768px. *ngIf cacher DIV jusqu'à ce que vous cliquez sur le bouton. MAIS je veux CACHER la DIV sur 500px, MAIS je veux MONTRER la DIV sur 1000px

OriginalL'auteur Naturo Power | 2017-10-31

  1. 24

    Vous pouvez utiliser la fenêtre.de l'écran.la largeur.
    Exemple:

    ngOnInit() {
  if (window.screen.width === 360) { //768px portrait
    this.mobile = true;
  }
}

    Html:

    <button *ngIf="mobile" (click)="showHide = !showMap"></button>
    Génial! C'est ce que je veux dire! Merci!!!! <3
    Votre accueil mate
    Selon votre cas d'utilisation, si l'utilisateur est en mesure de redimensionner la fenêtre ce ne sera pas sensible quand ils le font. Vous aurez besoin d'ajouter un redimensionnement de l'auditeur et de les recalculer à chaque redimensionnement.
    Ce n'est qu'une solution pour le téléphone qui ont un aucun réactif navigateur.

    OriginalL'auteur Swoox

  2. 14

    Pour l'avenir, moi ou d'autres, si vous avez besoin d'une solution qui surveille la taille de l'écran et utilisez des Observables/rxjs alors cette solution fonctionne:

    ngOnInit(): void {
  //Checks if screen size is less than 1024 pixels
  const checkScreenSize = () => document.body.offsetWidth < 1024;

  //Create observable from window resize event throttled so only fires every 500ms
  const screenSizeChanged$ = Observable.fromEvent(window, 'resize').throttleTime(500).map(checkScreenSize);

  //Start off with the initial value use the isScreenSmall$ | async in the
  //view to get both the original value and the new value after resize.
  this.isScreenSmall$ = screenSizeChanged$.pipe(startWith(checkScreenSize()))
}
    anti-rebond pourrait être plus approprié, ne sais pas si la manette des gaz se déclenche après la chaîne des événements a terminé
    merci pour votre réponse. m'a beaucoup aidé. debounceTime faire travailler mieux. dans angular7 le code a changé un peu. il est maintenant const screenSizeChanged$ = fromEvent(window, 'redimensionner').pipe(debounceTime(500)).pipe(carte(checkScreenSize));

    OriginalL'auteur shaunhusain

  3. 2

    Pensé que je voudrais ajouter ceci à la question que j'ai trouvé dans cette situation particulière @angular/flex-layout pour être très utile. https://github.com/angular/flex-layout.

    En particulier, vous pourriez être intéressé par le fxHide fonctionnalité: https://github.com/angular/flex-layout/wiki/fxHide-API mais ce package permet de travailler avec un réactif d'application beaucoup plus facile à mon avis.

    Vous pouvez afficher ou masquer le contenu comme si.

    Ne pas montrer quand les "petits" ou supérieur à "moyen" résolutions:

    <div fxShow.sm="false" fxShow.gt-md="false" fxShow="true" ></div>

    Ne cache quand à moyenne résolution

    <div fxShow fxHide.md ></div>

    Les points d'arrêt peuvent être personnalisés, mais ils ont par défaut déjà.

    OriginalL'auteur JCisar

  4. 1

    Viens de tomber sur cette réponse et je voulais quelque chose qui a travaillé de réactivité ainsi que sur redimensionner. J'ai mis 992px que le point d'arrêt parce que je suis aussi en utilisant bootstrap lg des points d'arrêt en même temps.

    export class TestComponent implements OnInit {

  constructor() { }

  isMobile = false;
  getIsMobile(): boolean {
    const w = document.documentElement.clientWidth;
    const breakpoint = 992;
    console.log(w);
    if (w < breakpoint) {
      return true;
    } else {
      return false;
    }
  }

  ngOnInit() {
    this.isMobile = this.getIsMobile();
    window.onresize = () => {
      this.isMobile = this.getIsMobile();
    };
  }
}

    Ensuite dans le code HTML

    <div *ngIf="isMobile === true>Some mobile element!</div>

    OriginalL'auteur Reed

  5. 0

    Le moins de lignes solution:

    Dans votre fichier TS:

    public isMobile = false;
ngOnInit() {
  window.onresize = () => this.isMobile = window.innerWidth <= 991;
}

    Dans le modèle HTML:

    <div *ngIf="isMobile">This is visible only on mobile</div>

    OriginalL'auteur Al-Mothafar