Angular Animation select element outside using query

Question

Is it possible to select an Element outside the Angular Animation Declaration using query? i have this code. Let say I do have two components.

layout.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

app-header.component.html

<header  [@MobileNavAnimation]="isMenuNavOpened ? 'navOpened' : 'navClosed'">
    <input id="sideMenuInput" type="checkbox" [(ngModel)]="isMenuNavOpened"/>
</header>

This will be rendered like this structure

<layout>
   <app-header></app-header>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
</layout>

Animation.ts

trigger('MobileNavAnimation', [
    transition('navClosed <=> navOpened', [
        query('layout', [
            state('navOpened', style({ position: 'absolute', left: '-100px', 'padding-right': '100px' }))
        ])
    ])
]);

So as you can see, I declare my animation to app-header component, but my animation is trying to change the higher element. Is this possible?

PS: I can achieve this through Input and Output of @angular/core, but I am trying to do experiment the capabilities of Angular Animation.