Cross-Browser print website with header on every page with pagenumber

Question

I have a web application with dynamic content, which should be designed for printing. Every print page should have a custom header with some meta infos and the number of page like P. 1 / 10. Default browser printing options should be disabled.

I achieved to disable printing options in chrome and firefox (Disabling browser print options (headers, footers, margins) from page?), so the first step is done.

My problem is to get the header on every page with page numbers.

I achieved to get the header on each page with position: fixed, but with this solution I can not achieve to counter pages with

  .print-pages-count::before {
    counter-increment: page;
    content: "P. " counter(page) " / " counter(pages);
  }

With these solution I only get P. 1 / 0 on each page.

I tried other solutions: https://www.w3.org/TR/css-gcpm-3/#running-elements

<p class="rh"><i>Miranda v. Arizona</i> in Context</p>
<h2><i>Miranda v. Arizona</i> in Context</h2>

@top-center {
   content: element(heading); 
   }

 p.rh { 
   position: running(heading); 
   }

 p.rh::before { 
   content: counter(page) ' / '; 
   }

but current browser seem not to support it anymore: CSS

Do you have an idea how can I achieve the desired printing behaviour?

P.S: I am using Angular 4 as Javascript Framework