event when div ngIf is rendered

Question

I was looking at issue at: https://stackoverflow.com/a/44737636/973651

I've a div with an ngIf condition, and I'd like to capture an event for when the div gets rendered. Supposedly, you can use the AfterContentInit event. The article I cited above, shows an example, which I've replicated but no luck in getting it to work.

I don't know what I'm doing wrong, but I can't get this to work. I get no errors, but it doesn't work for me.

My directive is defined as:

import { AfterContentInit, EventEmitter, Output, Directive } from '@angular/core'; @Directive({ selector: '[after-if]' }) export class AfterIfDirective implements AfterContentInit { @Output('after-if') public after: EventEmitter<AfterIfDirective> = new EventEmitter(); public ngAfterContentInit(): void { debugger; setTimeout(() => { // timeout helps prevent unexpected change errors this.after.next(this); }); } }

In my page component I import.

import { AfterIfDirective } from '../directives/after-if'; @NgModule({ providers: [], imports: [NgModel, BrowserAnimationsModule, HttpClientModule, AfterIfDirective], exports: [NgModel, BrowserAnimationsModule, AfterIfDirective] })

and in the html:

<div *ngIf="chkTearline.checked; else NotTearline" (after-if)="Clicked()">

what am I missing?

Does this not work in Angular 5?

 Clicked() { console.log('something got clicked'); }

Can you post your code with the Clicked function? Also drop in a console log in the setTimeout to see if it's firing in there. — Mathew Berg
– Mathew Berg, Commented May 8, 2018 at 20:34
here's the Clicked function. Clicked() { console.log('something got clicked'); } — Les Stockton
– Les Stockton, Commented May 8, 2018 at 20:53
why so strange selector name and input name ? whats wrong with default Angular style afterIf? — Sharikov Vladislav
– Sharikov Vladislav, Commented May 8, 2018 at 22:12
Possible duplicate of Event to fire when an angular *ngIf statement evaluates in template — luiscla27
– luiscla27, Commented May 8, 2019 at 0:53

luiscla27 · Accepted Answer · 2021-01-30 11:05:01Z

You can use setter like in example below:

template:

<div #elementToCheck *ngIf="expr"></div>

component:

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

Collectives™ on Stack Overflow

event when div ngIf is rendered

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related