ngClass and print media query not working together - css

Question

I am making an angular component to make a bunch of qr codes and print them. I have a component just for the qr code and want to make it possible to delete a qr code from the list and undo-delete a previously deleted code. I Before adding the undo-delete functionality, everything was working well because I was just removing that particular component from the list. However, now I don't want to completely remove it, I just want to fade it out until print time. I am using ngClass on my div and the "deleted" class does work. Anything that has class noPrint just gets display:none, however when I try to use ngClass to dynamically give a code noPrint, it doesn't set display: none on that particular code.
My qr-code html: The issue is in the first div tag at the top. I have tried adding single quotes on the class names to see if that works as well.
<div
fxLayout="column"
class="qrobj"
[ngClass]="{
deleted: !this.shouldExist,
noPrint: !this.shouldExist
}"
>
<button *ngIf="this.shouldExist" class="noPrint" mat-icon-button>
<mat-icon
matTooltip="Delete this Person?"
matTooltipPosition="after"
color="warn"
(click)="sendDelete()"
>block</mat-icon
>
</button>
<button *ngIf="!this.shouldExist" class="noPrint" mat-icon-button>
<mat-icon
matTooltip="Undo Delete?"
matTooltipPosition="after"
color="primary"
(click)="undoDelete()"
>undo
</mat-icon>
</button>
<div fxLayout="row" class="text">
<p>{{ person.Name }}</p>
<p>{{ person.Name }}</p>
</div>
<div fxLayout="row" class="images">
<img [src]="this.qrlink" (error)="getDefaultUrl()" />
<img [src]="this.piclink" (error)="getDefaultUrl()" />
</div>
</div>
Here is the part of my css that matters:
.deleted {
opacity: 0.3;
}
#media print {
.noPrint {
display: none;
}
}
This is what it looks like
before I delete a Code
This is what it looks like
after I delete a Code:
This is what shows up in the print preview: