Expand all PrimeNG Accordion panels automatically for Printing

Question

I am currently using the PrimeNG library's accordion component in my angular project. See info here .

The template includes some special css styling for printing the page--something like the following:

 @media print {
  .profile-progress-bar, .top-template-header-content, .header.profile-header{
    display: none !important;
  }
  html, body {
    height: auto;
    font-size: 10px !important;
  }

  p-accordionTab > div {
    display: block !important;
    selected: true !important;
  }

}

What I am trying to do, is automatically expand all accordionTab elements when the @media print rendering is processed for the page to be printed.

From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.

Selected Visibility of the content is specified with the selected property that supports one or two-way binding.

However, can this be somehow automatically triggered when the @media print rendering occurs?

Thanks!

Answer 1

media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files

relevant css :

@media print {
  ::ng-deep .ui-accordion-content-wrapper-overflown {
      overflow: visible;
      height: auto !important;
  }
}

complete demo on stackblitz here

Answer 2

This is an interesting one. To keep it inside the realm of Angular, you could use the @angular/cdk/layout library and inject MediaMatcher . You could also, of course, do almost this exact same thing using JavaScript (see here ... the cdk/layout method I'll show you really just wraps this).

The MediaMatcher service has a method called matchMedia , and from there you just add a listener:

import { MediaMatcher } from '@angular/cdk/layout';

constructor(private readonly mediaMatcher: MediaMatcher ) { }

ngOnInit() {
    mediaMatcher.matchMedia('print').addListener(e => e.matches ? 
    console.log('printing!') : null);
}

So where I've put the console.log , just perform your logic to get the accordians to expand.