CODEWITHSUNDEEP
angularangular-materialangular7
Elias
Elias

Reputation: 357

render component in mat-sidenav-content

I created an angular material sidenav with the following HTML template:

<mat-sidenav-container>
<mat-sidenav>
 <!--menu component added here-->
</mat-sidenav>

<mat-sidenav-content>
  <app-home></app-home>
  <router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

When the template is loaded for the first time the app-home component will be rendered. When a menu item is selected the relevant component will be rendered in the mat-sidenav-component but the app-home will still appear. Can I hide it when a menu item is selected?

Upvotes: 0

Views: 3902

Answers (1)

Emanuele
Emanuele

Reputation: 814

Due to my misunderstanding of te question i've made a last edit.

As introduction info: the method is the same if you are using Angualr or Angular Material.

EDIT: Here you can see same method applied to Angular Material: Stack blitz example

ORIGINAL: Yes your menu component have to send a boolean input to your page container with eventEmitter, so when the page has loaded the default state of the input is true and when the menu item is clicked the input state will change to false and the app-home will be hide.

Your page container (or sidenav main component) will be like this

// Imports omitted
@Component({
  selector: 'page-container',
  template: `
  <mat-sidenav-container>
    <mat-sidenav opened mode="side">Lorem ipsum</mat-sidenav>
      <mat-sidenav-content>
         <menu-component (show)="show($event)" (hide)="hide($event)"></menu-component>
      </mat-sidenav-content>
      <mat-sidenav-content>
         <app-home [toggle]="visible"></app-home>
      </mat-sidenav-content>
  </mat-sidenav-container>`
  })

export class PageContainerPage {

    visible: boolean;

    show(event: boolean) {
      this.visible = event;
    }

    hide(event: boolean) {
      this.visible = event;
    }

}

Your menu component will be like this - used here event emitter and output

// Imports omitted
@Component({
  selector: 'menu',
  template: `
      <ul>
        <li (click)="showElement()">menu item 1</li>
        <li (click)="hideElement()">menu item 2</li>
      </ul>`
})

export class MenuComponent {
    showHideBoolean: boolean; // Just delete default value

    // Output to send
    @Output() show: EventEmitter<Boolean> = new EventEmitter<Boolean>();
    @Output() hide: EventEmitter<Boolean> = new EventEmitter<Boolean>();

    showHideElement(){
      console.log('you have click on a menu item')
      this.showHideBoolean = !this.showHideBoolean;

      if (this.showHideBoolean) {
         this.show.emit(true);
         console.log('value to send: ', this.showHideBoolean) 
      } else {
         this.hide.emit(false);
         console.log('value to send: ', this.showHideBoolean) 
      }
    }
}

Your app-home component will be like this - used here input

@Component({
  selector: 'app-home',
  template: `
    <div [hidden]="toggle">I'm the first element</div>
    <div [ngClass]="{'color-red' : toggle}">I'm the second element!</div>
    <div *ngIf="toggle">I'm an element too!</div>`
})

export class AppHomeComponent {

    // Use @Import here
    @Input() toggle: Boolean; // Just remove the default value

}

Upvotes: 2

Related Questions