Que no se enoje StackOverflow pero al terminar de preguntar se me ocurrió la respuesta pero aun así la publique para mi yo del futuro venga a ver la solución y cualquier otro usuario que le pase lo mismo.
El caso es que de dejar en blanco el css del componente header, el header sube con todo el contenido al desplazar el scroll pero el codigo que hace lo que requiero es
mat-toolbar {
z-index: 999;
position: fixed;
}
.example-spacer {
flex: 1 1 auto;
}
Pero ahora el problema es que al ser fixed El contenido del resto de componentes quedan por debajo del mat-toolbar ya que todos los elementos comienzan a posicionarse en {x:0,y:0} y para evitar que el contenido quede escondido se me ocurrió crear otro mat-toolbar y cambiar el selector del headercomponent de mat-toolbar a una clase llamada toolbarreal (No soy bueno poniendo nombres)
entonces el codigo del header.component.html queda de la siguiente manera
<!--Ejemplo de angular-->
<mat-toolbar class="toolbarreal" color="primary">
<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
<mat-icon>menu</mat-icon>
</button>
<span>My App</span>
<span class="example-spacer"></span>
<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
<mat-icon>share</mat-icon>
</button>
</mat-toolbar>
<!--Codigo parasito para que el contenido de abajo siga su flujo normal-->
<mat-toolbar color="primary">
</mat-toolbar>
Como no se mucho de maquetado con html y css puede no ser la mejor respuesta así que si alguien que lea esto quiere mejorar la respuesta se lo agradecería mucho...