CODEWITHSUNDEEP
angulartypescriptprimeng
Ramsk
Ramsk

Reputation: 181

How to hide PrimeNG sidebar (defined at parent template), when we click on button defined at child template?

I am using PrimeNG sidebar which slides right and routes to child component when we click on button, there in child component I have form template with button cancel. you can find sidebar template below.

sidebar.component.html

<p-sidebar  [(visible)]="visibleSidebar2" position="right [baseZIndex]="10000">
<router-outlet name="createSidebar"></router-outlet>
</p-sidebar>

<a [routerLink]="[{ outlets: { createSidebar: 'create' } }]" class=" navigation__link" (click)="visibleSidebar2 = true"></a>

child.component.html

 <a   pButton  class="btn btn-default"  (click)="Cancel()">Cancel</a>

Now if I click on cancel button the sidebar needs to be hidden. I tried with some stackoverflow answers Angular 2 hide and show element previously posted but ended up with issue.

Any reply can be helpful. Thanks in advance.

Upvotes: 3

Views: 4874

Answers (2)

Fan Sword
Fan Sword

Reputation: 1

.layout-container .layout-sidebar{
  display: none !important;
  width: 0px !important;
}
.layout-content-wrapper{
  margin-left: 0px !important;
}

use this one

Upvotes: 0

Shah
Shah

Reputation: 86

One possible option is to generate a custom event from child Component and listen for the event on the parent Component.

Child.Component.ts

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

ChildComponentClass{
@Output() closeClicked = new EventEmitter<boolean>(); // create a new close clicked event

Cancel(){
this.closeClicked.emit(false) // emit the event with boolean value false when Cancel is clicked
}

Parent.Component.html

<Child-Component (closeClicked)="visibleSidebar2=$event"></Child-Component>

On the parent component listen for child components closeClicked event and you can call a function and update the visibleSlidebar2 value inside the function or since you are using two way data-binding for [(visible)]="visibleSidebar2" you can just update the value in template as showed.

For more info Regarding Parent Child Interaction

Upvotes: 1

Related Questions