Add layout.component.ts
Create the following file in your project.
layout.component.ts
import { ChangeDetectionStrategy, Component, computed, contentChildren, input, ViewEncapsulation } from '@angular/core';
import type { ClassValue } from 'clsx';
import { layoutVariants, type LayoutVariants } from '@/shared/components/layout/layout.variants';
import { SidebarComponent } from '@/shared/components/layout/sidebar.component';
import { mergeClasses } from '@/shared/utils/merge-classes';
@Component({
selector: 'z-layout',
template: `
<ng-content />
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class]': 'classes()',
},
exportAs: 'zLayout',
})
export class LayoutComponent {
readonly class = input<ClassValue>('');
readonly zDirection = input<LayoutVariants>('auto');
// Query for direct sidebar children to auto-detect layout direction
private readonly sidebars = contentChildren(SidebarComponent, { descendants: false });
private readonly detectedDirection = computed(() => {
if (this.zDirection() !== 'auto') {
return this.zDirection();
}
// Auto-detection: Check if there are any sidebar children
const hasSidebar = this.sidebars().length > 0;
return hasSidebar ? 'horizontal' : 'vertical';
});
protected readonly classes = computed(() =>
mergeClasses(
layoutVariants({
zDirection: this.detectedDirection(),
}),
this.class(),
),
);
}
