My current task involves adjusting the width of containers while also monitoring changes in my @Input since the DOM structure is dependent on it.
@Input('connections') public connections = [];
@ViewChildren('containers', { read: ElementRef }) chipContainers: QueryList<ElementRef>;
Since the value of this @Input can vary, I have implemented ngOnChanges to handle it.
public ngOnChanges() {
if (this.connections) {
const containerArr = this.containers.toArray();
if (containerArr.length) {
containerArr.forEach((container) => {
const child = container.nativeElement.children;
if (child.length) {
const baseWidth = child[0].clientWidth + 100; // omitted calc to find baseWidth
container.nativeElement.style.width = `${baseWidth}px`;
}
});
}
}
}
Despite setting the
container.nativeElement.style.widthconsole.log it.
I have also tried using
this.renderer.setStyle(chipContainer.nativeElement, 'width', `${baseWidth}px`);