What is the best way to conceal the PrimeNG sidebar (which is set at the parent template) by clicking on a button designated in the child

I am utilizing the PrimeNG sidebar feature that slides to the right and navigates to a child component upon clicking a button. Within the child component, there is a form template with a cancel button. The template for the sidebar can be found 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>

If I click on the cancel button, the sidebar should be hidden. I have attempted solutions from various Stack Overflow posts such as Angular 2 hide and show element . However, I encountered some issues in implementing them.

Any assistance would be greatly appreciated. Thank you in advance.

angulartypescriptprimeng

Answer №1

To enhance communication between components, one approach is to trigger a personalized event from the child Component and then monitor this event in the parent Component.

ChildComponent.ts

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

export class ChildComponent {
  @Output() closeClicked = new EventEmitter<boolean>(); // create a new event for close click

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

Parent.Component.html

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

In the parent component, listen for the closeClicked event from the child component. You can either call a function to update the visibleSlidebar2 value within the function or directly modify the value in the template if you are using two-way data binding like [(visible)]="visibleSidebar2".

Explore further information on Parent-Child Interaction

Answer №2

.page-wrapper .sidebar-container{
  visibility: hidden !important;
  width: 0px !important;
}
.content-area{
  padding-left: 0px !important;
}

apply this style

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a runtime issue with socket.io when using typescript that has been bundled by

Recently, I attempted to implement web sockets using socket.io in a Node server written in TypeScript with ExpressJS and bundled with Webpack. The server code is structured as follows: import * as Express from "express"; import * as SocketIO from "socket ...

expresstypescriptsocket.iowebpack

Retrieve the chosen item to automatically fill in the input fields using Ionic 2 and Angular

My goal is to create a dropdown menu populated with a list of items, and when a product is selected, its price should automatically appear in the quantity field. <ion-item> <ion-label>Item</ion-label> <ion-select (ionChange)="getP ...

javascripthtmlangulartypescript

Modifying Angular components does not cause *ngFor to update

Currently facing an issue with my Angular 5 project. I have a parent component that is responsible for displaying child components based on elements in my cartProducts array. Each child component receives a cartProduct object as input. The data for these c ...

angular

SvelteKit Superforms with Zod: An Issue with Checkbox Missing from Form Data

I'm currently in the process of creating a form with SvelteKit Actions, Superforms, Formsnap, and Zod. However, I've encountered an issue with my checkbox not functioning as expected. // schema.ts export const formSchema = z.object({ ... ...

typescriptsveltesveltekitzodsveltekit-superforms

Exporting the extended express request in a TypeScript library for seamless integration

I have been working on developing a library that extends the express Response object with a custom method called warn(). I want this new warn() method to be easily accessible when using the library. Here is the configuration in my tsconfig.json: { " ...

typescript

Discovering the CSS generated by an Angular framework

Recently, a white border appeared around my Angular application and after using the browser's inspector, I discovered that the body tag had an 8pt margin set on it. Despite my efforts, I could not pinpoint where this margin was coming from. Eventually ...

angular

What exactly do Option and the type [x: string] represent in TypeScript?

Currently, I am delving into the world of TypeScript and finding myself at a bit of a beginner's crossroads. In an effort to expedite my learning process, I have taken to dissecting various coding projects. However, I am encountering some difficultie ...

typescript

Googlebot is unable to view structured data tags generated in an Angular single-page application (SPA)

During live testing a URL on Google Search Console, I discovered that while Googlebot can render the page, the structured data is missing. The structured data is generated in JavaScript using the following function: insertStructuredData(genDataFn: Function ...

angularseosingle-page-applicationgooglebot

Avoid creating a pyramid structure by connecting multiple observables only after ensuring that each one is fully completed

Utilizing rxjs, I am wondering if there is a way to trigger the next function only when the observable has completed. Rather than the nested structure below: this.Start(data).subscribe( (data) => { console.log('next'); }, ...

javascriptangulartypescriptrxjsobservable

Can an entire application built with a combination of PHP, JavaScript, and HTML be successfully converted to Angular 7?

After creating a complex application that heavily relies on JavaScript, PHP, HTML, and numerous AJAX calls, I am considering migrating the entire codebase to Angular 7. Is it feasible to achieve this transition without requiring a complete rewrite in Ang ...

javascriptphphtmlangular

What is the reason that the combination type of two interfaces that expand a generic interface cannot be used for that generic interface?

Within my codebase, I've established a straightforward generic interface W. Extending this interface are two more interfaces - T and N, each adding a property type that can be utilized in a tagged union scenario: interface W<V> { value: V } ...

typescripttypescript-generics

What is the process for altering the color of an upload button once the maximum number of file uploads has been surpassed?

Within my HTML code, I have included a line to restrict the number of file uploads to a maximum of 3. <input *ngIf="uploader.queue.length < 3" #uploadButton ng2FileSelect (change)="fileUpload()" [uploader]="uploader&qu ...

htmlcssangularbuttonfile-upload

An error occurred: Unable to locate the file or assembly 'Interop.iTunesLib, Version=1.13.0.0, Culture=neutral, PublicKeyToken=null'

I've been attempting to connect to iTunes using C# programming language. The process involves creating a dll in C# and running it with TypeScript through the Overwolf API. Here's what I've done so far: Generated a .dll file I utilized the ...

c#.nettypescriptdllitunes

Issue with Implicit Import Feature in TypeScript 2.1 Not Functioning as Expected

I was eagerly anticipating the release of TypeScript 2.1.4, as one of the major reasons my team decided to use TS was the convenience of importing installed modules without needing to search for or create type definitions, thanks to implicit any imports. H ...

javascripttypescript

Ways to showcase my select/option in Angular 14?

My select input is not displaying and I'm struggling to understand why. Despite seeing it in the inspector, it remains hidden... I initially attempted to retrieve data from my service, which failed. Then, I experimented with placing static data direc ...

angularselect

The React component was not able to receive any children as input

My Typescript-written React component is called GradientText.tsx: import React, { ReactNode } from "react" import { cn } from "@/lib/utils" const typeMap = { h1: "h1", h2: "h2", p: "p", } inte ...

reactjstypescript

Issue arises when trying to implement sidebar navigation in Angular with Materialize CSS

Just starting my Angular journey and running into some trouble trying to set up a practical and responsive menu using SidebarNav and Dropdown. I used CLI to install and configure angular2-materialize and materialize-css. To create the menu, I made a comp ...

javascriptangulartypescriptmaterialize

Implementing shared element route transitions using framer-motion and NextJS (written in typescript)

I'm having trouble implementing animated routing using the <AnimateSharedLayout /> component from framer-motion. What I'm trying to achieve in the code below is to show a list of images and, upon clicking on them, navigate to /images/[image ...

reactjstypescriptnext.jsframer-motion

ng2-dragula error: issues with setting options and dropping version

It seems that version 1.5.0 supports this.dragulaService.setOptions, while version 2.1.1 does not, and vice versa with this.dragulaService.drop subscribe where version 2.1.1 supports it but 1.5.0 does not. Check out the Stackblitz Fork for version 1.5.0 ...

angularng2-dragula

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

How can I add Google fonts to my JSS for use in styling? const styles = ({palette, typography}: Theme) => createStyles({ time: { flexBasis: '10%', flexShrink: 0, fontSize: typography.pxToRem(20) }, guestname: ...

cssreactjstypescriptjss