Unable to change the margin & layout for printing in chrome browser from angular 2

Unable to change the margin & layout for printing in chrome browser from angular 2

I'm trying to print HTML but I'm not able to change the&nbsp;<strong>layout</strong>&nbsp;and&nbsp;<strong>margin</strong>&nbsp;of the&nbsp;<strong>chrome browser</strong>(refer the attached image).

I'm trying to print HTML but I'm not able to change the layout and margin of the chrome browser(refer the attached image).

PRINT() {
  window.print();
}
@media print {
  .doNotPrint {
    display: none;
  }
  * {
    -webkit-print-color-adjust: exact;
  }
  @page {
    margin: 0 !important;
    size: A4 Landscape !important;
    -webkit-print-color-adjust: exact;
  }
  html,
  body {
    margin: 0 !important;
    size: A4 Landscape !important;
    -webkit-print-color-adjust: exact;
  }
}
<form [ngClass]="themeSRVC.currentThemeNAME" fxLayout="column" fxFlex>
  <!-- navBAR -->
  <mat-toolbar id="idPrimaryTOOLBAR" color="primary" class="doNotPrint">
    <mat-toolbar-row>
      <button mat-icon-button type="button" (click)="routeSRVC.goBACK()">
        <mat-icon matTooltip="Go Back">arrow_back</mat-icon>
      </button>
      <span class="fillSPACE"></span>
      <button mat-icon-button (click)="PRINT()">
        <mat-icon matTooltip="print">print</mat-icon>
      </button>
    </mat-toolbar-row>
  </mat-toolbar>

<!-- printableCONTENT --> <div id="idToPRINT" fxFlex>

&lt;div fxLayout="row"&gt;
  &lt;div fxFlex="33" style="height:200px;background-color:red"&gt;Left&lt;/div&gt;
  &lt;div fxFlex style="height:200px;background-color:yellow"&gt;Center&lt;/div&gt;
  &lt;div fxFlex="33" style="height:200px;background-color:green"&gt; Right&lt;/div&gt;
&lt;/div&gt;

</div>

</form>


angular google-chrome

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Integrating Google Analytics With Angular 10/9

In this tutorial, we’ll learn to integrate Google Analytics with our Angular 10/9 application. As always, you’ll need to be familiar with HTML, CSS, and JavaScript/TypeScript and since we’ll be using Google Analytics with Angular, you’ll need to know the basic concepts of the framework.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica

Angular Workspace: No Application for You!

The how and why of using the --create-application flag with Angular CLI to create a Workspace without the initial application A nice addition to Angular CLI 7.0.0 was the --create-application flag. In this article I will discuss how and when to use this new feature. It will be especially useful when creating Angular libraries. NOTE: Angular CLI accepts both camelCase and kebab-case for this option. So, anywhere you see --create-application, you can also use --createApplication. For more detail