Angular 4 Accessing elements from another component

user_7684997 0
Viewed 3292

I am trying to create side-nav and toolbar. I want to create separate components for each so I have created 2 different components

code for <app-sidenavmenu>

<md-sidenav-container class="sidenav-container">
    <md-sidenav mode="push" class="sidenav" opened="false" #sidenav>
        <md-list>
            <md-list-item>...</md-list-item>
        </md-list>
    </md-sidenav>
</md-sidenav-container>

and code for <app-toolbar>

<md-toolbar>
    <span><button md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button></span>
    <span><h2>App name</h2></span>
</md-toolbar>

and in third home component I am using above components

Now I wanted to access #sidenav from side-nav component to toolbar component so that side-nav will be toggle with toggle function

How to achieve this.

angular typescript
5 Answers

I've created shared service for this:

@Injectable({providedIn: 'root'})
export class DashboardMenuService {
    private dashboardMenuToggleEventEmitter: EventEmitter<any> = new EventEmitter<any>();

    public toggleDashboardMenu(): void {
        this.dashboardMenuToggleEventEmitter.emit();
    }

    public subscribe(next: () => void): void {
        this.dashboardMenuToggleEventEmitter.subscribe(next);
    }
}
user_37529880
Related