Accessing Template Reference Variables from a view to another view

Question

Right now, I am working with a project that has a web design that will contain a multiple view (multiple HTML files) on a single page. Though this is not a new design, but I cannot find a solution for this.

What I am trying is to access the other element from another view, I know that after the view has been rendered, they will be a single HTML and not multiple, but the Angular syntax doesn't let me go through with this.

This is the sample code.

Let say I do have 2 files with names layout.html, header.html And also let say that the header has a selector named <app-header></app-header>

header.html

<div>
     <button (click)="sideBar.toggle()">
          <mat-icon>menu</mat-icon>
     </button>
</div>

layout.html

<div>
    <mat-toolbar>
        <app-header></app-header> <!-- important part -->
    </mat-toolbar>
    <mat-sidenav-container>
        <mat-sidenav #sideBar mode="side" opened> <!-- important part -->
            <app-sidebar></app-sidebar> 
        </mat-sidenav>
        <mat-sidenav-content>
            Main content
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>

So I'm trying to toggle the <mat-sidenav> using the button on my header, and I am referencing it with #sideBar

Is this possible?

No isn't possible. You can't access to the sidebar from the header component, the only way to do that is to create a Output() in you header component and the layout component listen this output, when the output will be emit you can toogle the sidebar. Makes sense ? — Yvan
– Yvan, Commented Oct 17, 2019 at 6:22

Rich · Accepted Answer · 2019-10-17 07:05:45Z

3

You can create an output in order to share information between component.

HeaderComponent.ts truncated file

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

export class HeaderEvent {
    type: 'ToggleNavBar' | 'AnyOtherType';
    data: any;
}

 @Output() headerEvent: EventEmitter<HeaderEvent> = new EventEmitter();

 // Should be use on the (click) event of the button
 onToggle() : void {
     this.headerEvent.emit({type: 'ToggleNavBar', data: {}});
 }

HeaderComponent.html file

<div>
     <button (click)="onToggle()">
          <mat-icon>menu</mat-icon>
     </button>
</div>

layout.html file

<div>
    <mat-toolbar>
        <!-- Here you can listen the headerEvent event and do what you nee to do -->
        <app-header (headerEvent)="sideBar.toggle()"></app-header> 
    </mat-toolbar>
    <mat-sidenav-container>
        <mat-sidenav #sideBar mode="side" opened>
            <app-sidebar></app-sidebar> 
        </mat-sidenav>
        <mat-sidenav-content>
            Main content
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>

edited Oct 17, 2019 at 7:05

Rich

4,3786 gold badges45 silver badges78 bronze badges

answered Oct 17, 2019 at 6:30

Yvan

1,1212 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rich Over a year ago

Is this the efficient way to achieve this? I'm thinking in the end they will be rendered as one, so why is it there's a lot of things to do in here?

Yvan Over a year ago

Because you choose to separate this two component, it's the only way to communicate between component. I think you should not separate this two component and make only component.

Yvan Over a year ago

It's a lot of code for just one event, so may be you should try to have only one component which combine the header and the sidenav.

Yvan Over a year ago

You should read this article, it's very interesting in order to understand how work interaction between component in angular. angular.io/guide/component-interaction

Collectives™ on Stack Overflow

Accessing Template Reference Variables from a view to another view

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related