Solución al Reto: Añadiendo animaciones a nuestra aplicación

Buenas tardes,

Envío imagen del reto:

Usuario anónimo

User

Hola, les comparto una actualización de la vista Lugares:

Espero Feedback y estaré encantado de aplicarlo y aprender más.
Saludos.

Usuario anónimo

User

Complementos:

Sección lugares Cercanos:

Sección Destacados:

Juan C Felizzola

Estudiante

Así me quedó el reto:

<a routerLink="../crear/{{lugar.id}}">
<h3>{{lugar.nombre}}</h3><span class="glyphicon glyphicon-star pull-right" *ngIf="lugar.plan == 'pagado'"></span>
</a>

Eduardo de la Cruz Ibarra

Profesor

Bien!

Irving Sarmiento

Estudiante

Reto:

Diego Vallejo

Estudiante

Otro modulo con el que quedo insatisfecho, de verdad que estaba esperando que enseñaran a consumir API reales :c

Wilson Alejandro Gonzalez Gaitan

Estudiante

Creo que este modulo no esta diseñado para eso, debido a que es transiciones y animaciones

Walter Enrique Ruiz Diaz

Estudiante

Enrique Martinez

Estudiante

![](

Adrian Alberto Casas Lopez

Estudiante

Miguel Angeles

Estudiante

Me quedo así.

Diego Burlando

Estudiante

Solucion de la estrellita !

Nelson Oswaldo Gonzalez Santiago

Estudiante

asi me quedo el reto:

<div class=“container”> <div class=“row”> <div class=“col-md-8”> <h2>Lugares Cercanos</h2> <a class=“btn btn-primary” routerLink="/crear/new">Crear Nuevo Negocio</a> <ul class=“list-group”> <ng-container \*ngFor=“let lugar of lugares”> <li class=“list-group-item” \*ngIf=“lugar.plan != ‘pagado’”> <a routerLink="/crear/{{}}"><h3>{{lugar.nombre}}</h3></a> <br /> <small>Creado: {{ | date:‘mediumTime’ | uppercase}}</small> <p [innerHtml]=“lugar.descripcion”></p> </li> </ng-container> </ul> </div> <div class=“col-md-4” [@contenedorAnimable] = “inicial”> <h2>Destacados</h2> <ng-container \*ngFor=“let lugar of lugares”> <diV \*ngIf=“lugar.plan == ‘pagado’”> <a routerLink="…/crear/{{}}"> <h3>{{lugar.nombre}}</h3><span class=“glyphicon glyphicon-star pull-right” \*ngIf=“lugar.plan == ‘pagado’”></span> </a> <p [innerHtml]=“lugar.descripcion”></p> </diV> </ng-container> </div> </div> </div>

Yesica Lizeth Cortés Pineda

Estudiante

Hola @santiagogn22 el editor te permite insertar código, intentalo a ver si te parece mejor así 😄

Nelson Oswaldo Gonzalez Santiago

Estudiante

jeje muchas gracias, si me preguntaba como lo hacian los demas compañeros.

Andres Alvarez

Estudiante

<div class=" col-12 col-sm-9 col-md-4" [@contenedorAnimable]="state">
            <h2>Destacados</h2>
            <ng-container *ngFor="let lugar of lugares">
                <div class="destacados alert-success padding" *ngIf="lugar.plan == 'pagado'">
                    <div class="d-flex justify-content-between  ">
                    <a class="nombre-lugar-destacado"routerLink="/crear/{{lugar.id}}"><h3>{{lugar.nombre}}</h3></a>
                    <i class="fas fa-star align-self-center "></i>
                  </div>
                    <p [innerHtml]="lugar.descripcion | linkify"></p>
                </div>
            </ng-container>
        </div>

XAVIER MALDONADO

Estudiante

me di cuenta de que no tengo ninguna de las 2 carpetas de fonts asi que las busque pero en la pagina de bootstrap solo esta la que va en la ruta “bootstrap/dist/fonts” me falta la que va en “bootstrap/fonts” si me reconoce el glyphicon pero no aparece ningun icono, me podrian ayudar con eso.

Mariano Logarzo

Estudiante

Se debe a que Bootstrap 4 ya no tiene Glyphicons. En la documentación de Bootstrap sobre la nueva versión lo dice y recomienda otras librerías para usar:

Una de las que recomienda, y la que uso yo, es FontAwesome:

Espero que te sirva. Saludos!

David Sandoval

Estudiante

Carlos Enrique Ramírez Flores

Estudiante