Guide on accessing, editing, or changing properties of a parent element while the window.print() preview screen is open

Is there a way to add a new class to the parent DIV only when the window.print() preview window is open? I've run into an issue where once the preview window opens, I'm unable to make any changes in the parent window. This seems to block all scripts from running in the parent window once the preview is displayed. I've researched extensively and found very few options like using "afterprint" or cancelling the print window, but my requirement is specifically for when the window is already open.

I attempted using beforeprint as well, but it triggers before the print window appears. My goal is to update the parent DIV class only when the print preview window is visible.

I have tested this in both Chrome and Firefox browsers.

If anyone has any suggestions on how to achieve this, I would greatly appreciate it.

javascriptcssangularajaxtypescript

Answer №1

Check out this Stackblitz demo showcasing how to programmatically open the print dialog by clicking a button or using the browser menu (CMD + P).

Utilizing the beforeprint event in Angular requires calling the detectChanges function for it to work properly.

constructor(
    private cdr: ChangeDetectorRef
  ) {}

...

@HostListener('window:beforeprint', ['$event'])
  onBeforePrint(event: any) {
    this.newStyle = true;
    this.cdr.detectChanges();

    console.log('Before Print');
  }

Best regards, Flo

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

React can easily incorporate CSS from multiple components

I'm experiencing a CSS import issue in my React project. I have a "Home" page that imports Home.css and a "Hero" page that imports Hero.css. Strangely, the styles from Hero.css are being applied to every page in the application without me explicitly d ...

htmlcssreactjs

Is there a way to keep the spotlight/shadow position fixed in relation to the horizontal center, regardless of the zoom level?

After working on the following code snippet, I've managed to keep the spotlight centered horizontally, except when the zoom factor is too high. This means that when I zoom in, the spot light no longer remains centered in the horizontal view port. It& ...

htmlcss

I am encountering some difficulties in the installation process of Angular CLI

Encountering an error trying to install angular cli despite updating both node and npm. https://i.stack.imgur.com/SpkNU.jpg ...

node.jsangularnpmangular-cli

Utilizing jQuery and Ajax to efficiently load images

I am currently working on a project where an image tag triggers a jQuery function using AJAX to download images from another source to the server upon being clicked. However, I am facing an issue where when the image is clicked, it opens a new tab and atte ...

jqueryhtmlajax

Navigating to an external URL within a component in Angular 4: Tips and Tricks

Currently, I am working on a project using a node/express server along with Angular 4. To streamline my work with the endpoints I have created, I use the command ng build --watch --output-path. My project involves controlling music through the Spotify web ...

angularspotify

Javascript ajax async data update has encountered a failure

Utilizing HTML, javascript, and Nodejs coding to create a chrome extension. When the page loads, the function getBalance() is invoked to retrieve data and display it in an HTML span. Below is the code snippet: function getBalance() { var request = new ...

javascriptnode.jsajaxgoogle-chrome-extensionget

Retrieving Values Entered by Users in a Bootstrap Form

Here is the code I have for an input field within Bootstrap: <div class="form-group"> <label for="f2">F</label> <input type="text" class="form-control" name="f2" id="f2&quo ...

javascriptbootstrap-5

Importing CSS with Node Sass using npm

Instead of inlining css within sass, I attempted to utilize the npm package Node Sass CSS importer. Unfortunately, I am struggling to get it to function properly. I typically use npm as my build tool: "build:css": "node-sass some_path/style.scss some_pa ...

cssnode.jsnpmsass

Perform a function dynamically once a specific textfield is filled and continuously while filling another textfield

Imagine we have two text fields - one for a first name and one for a surname. As I type in the surname field after already filling out the first name, a function called sug() should provide suggestions or perform some action each time I add another letter ...

javascripthtmlangularjsdynamictextfield

Issues with alignment in Firefox

My table alignment is off in Firefox but looks fine in Chrome and IE. Do I need to add an "FF Fix" for this issue? In Chrome/IE, the little dot in the bottom right corner of each cell appears correctly, but in Firefox it seems to be misplaced in the top r ...

htmlcssalignment

A password must contain a minimum of 2 uppercase letters, 2 lowercase letters, 2 symbols, and 2 numbers in any order according to the regular expression

I'm having trouble implementing this RegEx pattern in JavaScript for password validation: (?=(.*\\d){2,})(?=(.*[A-Z]){2,})(?=(.*[a-z]){2,})(?=(.*[!@#$%^&*?]){2,})(?!.*[\\s])^.* ...

javascriptangularjs

Utilizing ARC4 Encryption with Javascript on iOS devices

I keep getting a blank result when running this code. It doesn't display anything. [self.webview loadHTMLString:@"<script src=\"http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/rc4.js\"></script>" bas ...

javascriptiosobjective-cencryptionjavascriptcore

What is the best way to update an existing array with a new array following an AJAX call?

I currently have a collection of 3 objects stored in an array. Recently, I initiated an ajax request to fetch a brand new array to substitute the current one. console.log('initiating process'); console.log(existingData); jQuery.ajax({ url: ...

javascriptjqueryajaxasynchronous

Unusual problem encountered in my JSF application where the symbols ">" and "<" are mistakenly changed to "<" and ">" when using JavaScript

I am currently encountering an issue with some JavaScript in a JSF application. After some investigation, I found that removing certain lines of code resolves the problem. The error displayed in the Chrome console is "unexpected ;" and it specifically poin ...

javajavascriptjqueryjsffacelets

Is it possible for me to generate c3js graphs dynamically?

Here is my current progress: <div id="chart"></div> <script> var names = <?php echo json_encode($array1) ?>; var count = <?php echo json_encode($array2) ?>; var x=0; while (names[x]!=null) ...

javascriptphploopsc3.js

Transforming a string into JSON with proper sanitization

When web scraping, the website returns a string like this on get request: jQuery18305426675335038453_1429531451051({"d":[{"__metadata":"cool"}]}) The complete code snippet is provided below: var baseUrl = "http://SOMEURL.COM?spatialFilter=nearby(52.4795 ...

javascriptregexjson

Tips for verifying the HTML5 date format

I am looking to implement the HTML5 date input field <input type='date' name='customDate'> This will allow other users to utilize the built-in datepicker available in their browser. One challenge I have encountered is ensuring ...

javascriptphpjqueryhtmldate

Unable to retrieve cookies post redirect in Django

I recently encountered an issue that I need help with. Allow me to explain in a simpler manner. My goal is to have a user click on a button on website A, triggering an AJAX post request to a Django view. Within this view, I use response.set_cookie to set ...

pythondjangoajaxcookies

Can data be transferred within a callback to the function it encapsulates?

I am currently working on developing a user login system and I find myself in need of querying the database. Being a beginner in coding, I am grappling with the concept of callbacks and how data can be passed once the callback has been executed. My dilemm ...

javascriptmysqlnode.jsfunctioncallback

Height:auto causing problem for content with varying height? Check out the demonstration on jsFiddle

Can you help me with the HTML below? I want the container to wrap around the section, content, and elements, and have element2 positioned directly next to element1. <div class="page"> <div class="container"> <div class="section" ...

htmlcss