Evento que se dispara cuando una declaración angular * ngIf se evalúa en la plantilla

Solución:

los *ngIf eliminará ese elemento DOM y todos los componentes / directivas adjuntos. Por lo tanto, puede escribir una directiva simple que ejecute un evento cuando se crea por primera vez. Cuando el *ngIf transiciones desde falso para cierto se creará la directiva (una y otra vez, etc …)

@Directive({selector: '[after-if]'})
export class AfterIfDirective implements AfterContentInit {
    @Output('after-if')
    public after: EventEmitter<void> = new EventEmitter<void>();

    public ngAfterContentInit(): void {
       // timeout helps prevent unexpected change errors
       setTimeout(()=> this.after.next());
    }
}

HTML de muestra:

<div *ngIf="user$ | async as user" (after-if)="your expression">
   <p>{{user.name}}</p>
</div>

Una solución sin la creación de una nueva directiva es tomar ventaja de @ViewChild y @ViewChildren comportamiento:

Decorador de propiedades que configura una consulta de vista. El detector de cambios busca el primer elemento o la directiva que coincida con el selector en la vista DOM. Si la vista DOM cambia y un nuevo hijo coincide con el selector, la propiedad se actualiza.

1. Enfoque ViewChild

La parte importante es Si la vista DOM cambia lo que significa que, en este caso, esto solo se activará cuando el elemento sea creado o destruido.

Primero declare un nombre de variable para el elemento, para la muestra que usé #userContent

<div #userContent *ngIf="user$ | async as user" class="container">
  <p>user.name</p>
</div>

Luego agregue un @ViewChild referencia dentro de su componente:

@ViewChild('userContent') set userContent(element) {
  if (element) {
     // here you get access only when element is rendered (or destroyed)
  }
}

Esta solución se proporcionó dentro de otra pregunta, también @ViewChild el detalle del comportamiento está disponible aquí.

2. Enfoque ViewChildren

Otra solución sin utilizar una nueva directiva es suscribirse a
@ViewChildren cambiar observable, en lugar de usar @ViewChild ponlo así:

@ViewChildren('userContent')
private userContent: QueryList<any>;

Y luego suscríbete al cambio observable:

userContent.changes.subscribe((d: QueryList<any>) => {
  if (d.length) {
    // here you get access only when element is rendered
  }
});

Preferí la última forma porque para mí era más fácil manejar observables que validaciones internas setter's, también este enfoque está más cerca del concepto de “Evento”.

---

---

Utiliza Nuestro Buscador