I think you need to either let the animation control the visibility of your child element (look into sequence or stagger), or create a separate trigger for your element. Right now, within your current animation the element is not found because Angular doesn't render it yet (because of the if-statement). Your example looks like it should all be controlled from the animation, like a sequence of events. However, if you just want a condition to control the animation, you can add a separate trigger: https://stackblitz.com/edit/angular-ivy-vsa8b4

Hi @mslooten, thanks for your quick reply.

I think, the token(:enter, :leave) can control the visibility or presence in the DOM for an element.
And according to the angular.io document, it should have worked, right?

Hi @thirumanidev, ah I understand. Looking at the docs it should be possible, the usage notes example is basically what you're trying to do.

Edit:
I did manage to get it working in your example by moving the timer function to the ngOnInit hook instead of having it in the constructor. I think that's better anyway. In this case, because the code is in the constructor, it's running before Angular has finished initialising all data-bindings.

Hi @mslooten,
I tried your idea in my example, moved the timer call from constructor to ngOnInit, it doesn't work.

Hi @thirumanidev please check your stackblitz and notice that the error in the console appears right away and not when you set boo to true (setting boo to true doesn't actually trigger any sort of animation as you are not bounding boo to your trigger in any way)

So when your div component enters the DOM, its * => * transition gets triggered and in it the queries will be executed, including the query(".text4:enter", [ but at that point the .text4 element isn't actually present (because boo starts as false), so I do think that this is totally the expected behaviour

Am I missing something? 🤔

PS I am not too sure what you mean with the following:

I think, the token(:enter, :leave) can control the visibility or presence in the DOM for an element.
And according to the angular.io document, it should have worked, right?

But just to clarify, the query function only "queries"/"looks for" elements, it doesn't affect at all their presence or lack thereof in the DOM