I have a unique scenario in my component.ts file on a specific page where I need to incorporate custom CSS for printing purposes:
@Component({
selector: "dashboard",
templateUrl: "./dashboard.component.html",
styleUrls: ["./dashboard.component.scss"],
encapsulation: ViewEncapsulation.None
})
However, I am looking for a way to revert back to the default encapsulation when navigating away from this page. Is there a solution for this?
Alternatively, is it possible to apply encapsulation only when the print button is clicked, and then automatically switch back to normal afterwards?
If I navigate away and refresh the page, the encapsulation returns to its default state across all pages, but I prefer not to rely on refreshing.
EDIT
The reason behind adding the encapsulation was to allow for landscape printing by using the following code within the scss file:
@media print {
@page {
size: landscape
}
.no-print,
.no-print * {
display: none !important;
}
body {
-webkit-print-color-adjust: exact;
}
canvas {
max-width: 100%;
height: auto;
}
.printClass {
display: inline-block;
}
}
Without this adjustment, the global scss styling would cause the printed output to be portrait every time.