Cursos Empresas Blog Live Conf Eventos Precios

0:004:09

Recursos

Resumen

Los callbacks son funciones que se ejecutan al iniciar y finalizar una animación.

Callbacks

Curso de Angular 4

Clase 52 de 80

Clase 52 / 80

Comentarios (8)8 comentarios

Juan C Felizzola

Hace 9 años

Les colocé un icono con una condición:

<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

Excelente!

Usuario anónimo

User

¡Gran aporte! lo que hace un simple elemento en una fila normal 😃

Marwin Gelvez

El icono lo coloque al lado del nombre del negocio, con una condición, se ve de la siguiente manera:

Arturo Mojica Guerrero

Hace 7 años

Compañeros, me sale en el navegador un error de: ERROR Error: The provided animation trigger "contenedorAnimable.start" has not been registered!. Alguien le ha salido?

Víctor Hugo Rivas Sánchez

Recomiendo como buena práctica colocar los métodos después del constructor:

export class LugaresComponent {

  constructor(private lugaresService: LugaresService) {
    this.lugaresService.getLugares() // .valueChanges() => if it's used with database queries
                       .subscribe(lugares => {
                         this.lugares = Object.values(lugares);
                        }, error => {
                          console.log(error);
                          this.error = 'Error:' + error.statusText;
                        });
  }
  animar() {
    this.state = (this.state === 'final') ? 'inicial' : 'final';
  }
  animacionInicia(e) {
    console.log(e);
    console.log('Animacion Inicia');
  }
  animacionTermina(e) {
    console.log(e);
    console.log('Animacion Termina');
  }
}

yldemaro jimenez

<ng-container *ngFor=“let lugar of lugares” >

					<li class="list-group-item" *ngIf="lugar.plan=='gratuito'" >
						<div class="row">
							<div class="col-md-6 ">
								<h4>
									<a routerLink="../crear/{{lugar.id}}">
										<h3>{{lugar.nombre}}</h3>
									</a>
								</h4><hr>
								<small>Creado: {{lugar.id | date:'fullDate' | uppercase}}</small><hr>
								<p [innerHtml]="lugar.descripcion | linkifystr"></p>

							</div>
							<div class="col-md-6 "><img src="{{lugar.imagen}}" alt="" width="100%" height="100%"> </div>
						</div>
					</li>
					<hr>
				</ng-container>

Jonathan Jiménez

<a routerLink="/detalle/{{lugar.id}}"> <h3>{{ lugar.nombre }}</h3> </a> 
<span class="logo-star" *ngIf="lugar.plan=='pagado'"> <i class="fa fa-star" aria-hidden="true"></i> </span>

Andres Felipe Valencia Benitez

Fernando Gonzales

a que se debe que el parametro de las funciones deben tener el prefijo $. con esta linea me loguea “undefined” para el evento mientras que en la otra funcion se loguea sin problemas

[@contenedorAnimable]="state" (@contenedorAnimable.start)="animacionInicial(event)" (@contenedorAnimable.done)="animacionTermina($event)"```

Alejandro Valenzuela

Hace 8 años

Hola fanndo, si no me equivoco, accedes al objeto evento mediante la variable $event.
Saludos.

Recursos

Resumen

Callbacks

Progreso del curso

Inicio del curso

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

Fin del curso

Sesiones en vivo

Contenido Bonus