# Ejercicios 5

En esta sección de ejercicios vamos a modificar la pantalla con la lista de películas para permitir al usuario elegir un _layout_ diferente para la vista.

## Ejercicio 5.1 - Botón cambio de vista

En primer lugar añadiremos un botón en el _toolbar_ superior que nos permitirá alternar entre el layout tipo lista (el actual) y el nuevo _layout_ con formato de cuadrícula.

Para esto vamos a añadir dos botones al _toolbar_ superior dentro del _slot primary_ (revisa la presentación "Componentes 1", sección "_toolbar_ con botones"). Para cambiar al modo cuadrícula usaremos el icono "`apps-sharp`" y para cambiar al modo lista el icono "`reorder-four-sharp`".

Estos botones dependerán de la variable booleana `modoLista` definida en el controlador asociado (que por defecto tendrá el valor `true`). De forma que si la variable tiene el valor `true` se mostrará el botón `apps-sharp` y si la variable tiene el valor `false` el botón `reorder-four-sharp`. A modo de ejemplo se muestra el código para el primer botón:

```markup
<ion-button *ngIf="modoLista == true" (click)="cambiarVista()">
    <ion-icon slot="icon-only" name="apps-sharp"></ion-icon>
</ion-button>
```

Como se puede ver en el código, al pulsar sobre este botón se llamará a la función `cambiarVista()`. El código del otro botón sería igual, llamaría a la misma función, solo variando la condición de `*ngIf` para que se muestre solo cuando la variable es `false`.

La función `cambiarVista()` la tenemos que definir en el controlador asociado para que cada vez que se llame cambie el valor de la variable `modoLista`. Una vez hecho esto podemos probar la aplicación y comprobar que el botón de la barra superior debería de cambiar cada vez que lo pulsemos.

## Ejercicio 5.2 - Vista modo cuadrícula

A continuación vamos a definir la vista tipo cuadrícula. Esta nueva vista la añadiremos a la misma pantalla `videoclub`, y lo que haremos será simplemente mostrar u ocultar una vista en función del valor de la variable `modoLista`.

Para esto en la etiqueta de apertura de la lista (la que tenemos actualmente) podemos comprobar si la variable `modoLista` tiene el valor `true` y en otro caso mostrar un nuevo _template_ llamado `modoGrid`:

```markup
<ion-list *ngIf="modoLista == true; else modoGrid">
    ...
</ion-list>

<ng-template #modoGrid>
    ...
</ng-template>
```

Dentro de este _template_ es donde definiremos la nueva vista tipo cuadrícula, la cual la crearemos utilizando un grid con una única fila a la que se añadirán todas las películas, cada una dentro de una columna. El número de columnas variará dependiendo del tamaño de la pantalla, como se muestra en la siguiente captura:

![](https://2988180318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxy00BDS_2lmgaF%2F-LwrBLXzppTes_uXgKI-%2F-LwrBPD752n-XCr8JqOv%2Fejercicio-5-1.png?generation=1577179030517082\&alt=media)

## Ejercicio 5.3 - Vista vacía

Por último vamos a realizar una comprobación para que, en el caso de que la lista de películas esté vacía, aparezca un aviso indicándolo.

Para esto añadiremos una etiqueta `<div>` que englobe a las dos vistas de la sección de contenido, es decir, a la lista y a la cuadrícula. En esta etiqueta comprobaremos si la variable `listaPeliculas` contiene algún valor, en caso negativo mostraremos una plantilla llamada `emptyList` con el siguiente aspecto:

![](https://2988180318-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxy00BDS_2lmgaF%2F-LwrBLXzppTes_uXgKI-%2F-LwrBPD9jQheMODlqaBh%2Fejercicio-5-2.png?generation=1577179030543017\&alt=media)
