2

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.

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
Ramsk
  • 171
  • 2
  • 11

1 Answers1

1

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

Shah
  • 86
  • 1
  • 4