Is it possible to print a specific section of a webpage?

I am trying to implement a print button that allows users to print specific content on the page, however, the default print preview does not meet my requirements.

Specifically, I want to print only this visualization:

https://i.sstatic.net/gDhlM.png

Unfortunately, clicking the print button also includes the sidebar in the printed output:

https://i.sstatic.net/Uc3rV.png

Is there a way to extract a particular div for printing purposes? I'm unsure how to achieve this.

<div class="home-content wrapper-component ">
   <!-- Portfolio Securities-->
   <h1 class="text-center pt-4 pb-3">Portfolio Securities</h1>
   ...

In my TS file, I have the following function:

printPage() {
  window.print();
}
angulartypescript

Answer №1

Utilizing CSS, you have the ability to specify styles for printing and selectively hide elements that should not be included in the printed output. To achieve this, simply include the following rule in your main CSS file:

@media print {
  .hide-on-print {
    display: none;
  }
}

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

What is the best way to transfer information to the canActivate service guard?

Here is the route definition: { path:'specific_path', component: specific_component, canActivate: specific_service} What is the best way to send data to the specific_service? ...

angular

Select the location for rendering the application within the root HTML using Single-SPA

I am strategizing to utilize the single-SPA framework alongside angular in order to construct a microfrontend architecture for a website. The current setup of the website is based on a legacy monolith structure, but we are aiming to transition it into a mi ...

angularsingle-spa

Troubles with converting CSS from left-to-right (LTR) to right-to-left (RTL) in

I am currently working on an Angular2 application and utilizing npm scripts and Webpack2 for my AOT builds as well as creating language specific bundles. In my Arabic configuration file, I attempted to implement the following code snippet: { test: /\ ...

angularright-to-leftwebpack-2

Loading CSS files from the Assets folder in Angular 2/4: Step-by-step guide

I have a question regarding my .angular-cli.json file configuration. Here is what I have defined: "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/assets/css/main.css", "styles.css" ], In my assets folder, I have CSS files loca ...

htmlcssangularassets

Error message "ERR_NO_ICU" appears when trying to run the command "ng serve

I am currently working on a website project using Spring Boot and Angular, but I am encountering some challenges when trying to start Angular's live development server. The error message I receive is the following: ubuntuserver]#> ng serve internal ...

angularnpmangular-cliangular-schematics

Tips for adding fixed labels to ng2-charts bar graphs

I am currently using ng2-charts and have an array of data. The challenge I am facing is that when I only have data for Tuesday and Wednesday, the chart only displays those two days. However, I would like the x-axis to remain static, showing all days of the ...

angulartypescriptchart.jsng2-charts

Mastering the Art of Flex Layout Grids

Here is a preview of how my grid is currently formatted: https://i.stack.imgur.com/SBChV.png The current code looks like this: <div fxLayout="row wrap"> <img class="component-logo" fxFlex="1 1 c ...

angularangular-flex-layout

Developing in TypeScript with styled-components allows for seamless integration between

New to TypeScript and seeking guidance. I currently have a component utilizing styled-components that I want to transition to TypeScript. import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-comp ...

reactjstypescriptstyled-components

Merge two arrays by matching their corresponding identifiers

I have 2 separate arrays that I need to merge. The first array looks like this: const Dogs[] = [ { id: '1', name: 'Buddy' }, { id: '2', name: 'Max' }, ] The second one: const dogAges[] = [ { id: '4&ap ...

javascriptreactjstypescript

Encountering an error when attempting to include React TypeScript onChange with a Material UI switch component

I'm working on implementing a show/hide functionality using a switch. I want the component to be displayed when the switch is turned on and hidden when it's turned off. Here's the code I've written: const VirtualEventSection = ({ con ...

javascriptreactjstypescriptmaterial-ui

Optimal approach for designing interfaces

I have a situation where I have an object retrieved from the database, which includes assignee and author ID properties that refer to user objects. As I transform a number into a user object, I am unsure about the best practice for defining the type of the ...

angulartypescriptoopinterface

Reactive Extensions - Incorporating interdependent synchronous calls into a fork join without the need for nesting

Looking for a way to avoid nesting synchronous calls that rely on each other and wanting to subscribe at the end result, similar to forkjoin. I came across a solution on stackoverflow (Wait for nested subscribe in angular before continuing with main subscr ...

angulardictionaryrxjsobservablesubscribe

The function signature '(event: ChangeEvent<HTMLInputElement>) => void' does not match the expected type 'ChangeEvent<HTMLInputElement>'

This is my first time using TypeScript to work on a project from the ZTM course, which was initially written in JavaScript. I am facing an issue where I am unable to set a type for the event parameter. The error message I receive states: Type '(event: ...

reactjstypescripttypescomponents

Encountering issues with MatToolbar in Angular 9 causes unexpected errors

Running Angular version 9.2.0 Encountering an issue while importing the MatToolbarModule in a module and utilizing it in the HTML template. The error message reads as follows: This could indicate that the library (@angular/material/toolbar) that declar ...

angularangular-material

A guide on retrieving bytecode from a specific PDF using Angular

Can anyone help me with extracting the bytecode from a selected PDF file to save it in my database? I keep encountering an error stating that my byte is undefined. Could someone please review my code and identify what might be causing this issue? I attemp ...

javascriptangulartypescript

An issue was encountered in the karma/config.tpl.ts file at line 13, column 18 - a TS1109 error indicating that an expression was expected. This

I'm encountering the following error after updating to Angular 9, so I haven't downgraded TypeScript. Could someone please assist me? I've tried numerous solutions without success. node_modules/karma/config.tpl.ts:66:16 - error TS1005: &apo ...

angulartypescriptjasminekarma-runner

How can I display data both as a dropdown and an autocomplete in Angular using a textbox?

There is a textbox with autocomplete functionality. When the user clicks on the textbox, an API call is made with two parameters - Pubid and Date. The data is then displayed in a dropdown with autocomplete feature. Now I am attempting to have the data app ...

angulartypescript

Changing a string to HTML within an Angular 2 application

Is there a simple way to convert a string to HTML? I am attempting to convert a string containing valid HTML, href links, and line breaks. Currently, I am utilizing the DOMParser().parseFromString method as outlined on https://developer.mozilla.org/en-US ...

htmlangular

Select Year - Calendar View

I am currently making adjustments to a basic datepicker. I am looking to only include the Year dropdown (Month is not necessary). https://i.sstatic.net/AEpaj.png I have attempted to eliminate the Month dropdown by applying the following CSS: select.cus ...

cssangularbootstrap-4datepickerng-bootstrap

Empty spaces are mandatory here

When experimenting with declaring a function that must be called with a specific context (undefined, null, or global), I made an interesting discovery. I noticed that when declaring a function with this: void, it can be called with any context. However, if ...

typescriptvoid