1

Estoy diseñando una webapp y codificando 2 vistas. Para tablet y mobile. En cada caso hay componentes que no están en la otra y viceversa.

Por ejemplo:

  • Tengo una etiqueta <p>: <p class="saludo">¡Hola {{user.name}}!, buenos días</p>

En el caso de mobile no quiero que se muestre, pero para tablet si quiero.

Lo que hice fue:

//Tablet 1024px
@media screen and (min-width: 441px) and (max-width: 1024) {
.saludo{
        //Estilos correspondientes
    }
}

//Mobile 440px
@media screen and (min-width: 0px) and (max-width: 440px) {
.saludo{
        display: none;
        visibility: hidden;
        opacity: 0;
    }
}

Esto no me parece del todo correcto (quisiera saber si está bien visto o no) porque al inspeccionar la página y ver los elementos. La etiqueta <p> para mobile existe.

Estuve buscando y no encontré nada al respecto. Pero mi consulta era si existe alguna función u opción de Angular para tomar las medidas de la ventana desde el html para usar con la directiva ngIf. Por ejemplo:

<p class="saludo" *ngIf="window.widht > 440px">¡Hola {{user.name}}!, buenos días</p>

El objetivo es no crear ninguna función para obtener el tamaño de la ventana.

4
  • 1
    ¿Si está bien visto? Sí, así funciona el diseño adaptativo. Usar *ngIf es más usado para ocultar/mostrar elementos si eso depende de eventos o condiciones en la aplicación.
    – Lobos
    Commented el 13 abr. 2022 a las 14:29
  • Genial!! No encontraba en ningún lado si estaba bien o mal. Muchisimas gracias! Commented el 13 abr. 2022 a las 14:33
  • No conozco angular, pero en vanilla window.innerwidth te devuelve el ancho del viewport. Imagino como en react podras llamar a funciones del objeto window desde dentro de los componentes Commented el 13 abr. 2022 a las 15:30
  • Esto te puede ayudar stackoverflow.com/questions/47034573/… Commented el 13 abr. 2022 a las 18:12

1 respuesta 1

1

Puedes usar el layout de la cdk de angular material con la directiva ngIf y ng-container.

@Component({...})
class MyComponent {
 constructor(mediaMatcher: MediaMatcher) {
  const mediaQueryList = mediaMatcher.matchMedia('(min-width: 1px)');
 }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.