In my latest project, I am working on developing a mobile-first application. My plan is to include a navbar at the top of the screen and a slide-in menu on the left side that will be accessible on every page or view.
The current layout of my architecture looks like this:
<app-component>
-> <navbar-component>
-> <sidemenu-component>
-> <router-outlet><!-- The different pages will be displayed here !--></router-outlet>
One functionality I would like to have is the ability to click on a button in the navbar-component to open the sidemenu-component.
To achieve this, I need to establish a reference of one component within the other, either in the sidemenu for event registration upon clicking, or in the navbar for triggering the sidemenu.
Initially, my idea was to utilize @Input() and @Output() properties to pass references between the components.
//app-component.html
<navbar-component [parentComponent]="referenceToAppComponent" (instance)="navbarComponent"></navbar-component>
<sidemenu-component [parentComponent]="referenceToAppComponent" (instance)="sidemenuComponent"></sidemenu-component>