I am writing a component that accepts a TemplateRef as in @Input() and renders it at some location within the component. The template appears in a container div that has a given width and height that don't necessarily match the aspect ratio of the template. My goal is to stretch (distort) the template to fit the container.
<div class="box-content box-background box-template-container">
<ng-container *ngTemplateOutlet="boxTemplate; context: { box: box }">
</ng-container>
</div>
I found what is necessary in the SCSS to make this work:
.box-template-container {
> ::ng-deep * {
transform-origin: top left;
transform: scale(1, 2);
}
}
The problem is this only works when the container is twice as high as the template, so I need to make the 2dynamic somehow. That's what I am looking for and cannot find. The challenge is the ::ng-deep partm the scale value is something I could calculate in a function.
Does anyone know how to do this or knows a better way of doing it?
I created a Stackblitz to demonstrate
Not sure what supposed to be inside the template but in general the approach feels wrong.
Probably something like this should be just enough:
.box-template-container::ng-deep > * {
width: 100%;
height: 100%;
}
or more complex:
.box-template-container {
position: relative;
}
.box-template-container::ng-deep > * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}