I am currently working on a directive that can capture the coordinates of the parent element and change the position of the child element based on the parent's x and y positions.
Both components are standalone, and the directive has already been imported into the component. However, I am encountering an error:
✘ [ERROR] NG8002: Can't bind to 'appMenuChildPosition' since it isn't a known property of 'ul'. [plugin angular-compiler]
So, how do I properly import the directive into the component? Oo
My component
@Component({
selector: 'app-home',
standalone: true,
imports: [NgIf, NgFor, TruncatePipe, LocaleConverterPipe, MenuChildPositionDirective],
templateUrl: './home.component.html',
styleUrls: ['./home.component.sass'],
animations: [fadeOut]
})
export class HomeComponent implements OnInit, OnDestroy {
public isLoading: boolean = true;
public settings?: Settings;
public error?: HttpErrorResponse;
private isDestroyed$ = new Subject<void>();
constructor(
private backendService: BackendService,
private utilsService: UtilsService
) {}
public ngOnInit(): void {
this.backendService.get_settings()
.pipe(
takeUntil(this.isDestroyed$)
)
.subscribe({
next: (data: Settings) => this.settings = data,
error: (error: HttpErrorResponse) => this.error = error,
complete: () => this.setup(this.settings)
});
}
public ngOnDestroy(): void {
this.isDestroyed$.next();
this.isDestroyed$.complete();
}
public open(event: MouseEvent, element: NavigationElement): void {
const parentElement = event.target as HTMLElement;
const rect = parentElement.getBoundingClientRect();
element.coords = {x: rect.left, y: rect.top};
element.opened ? element.opened = false : element.opened = true;
}
private setup(settings?: Settings): void {
this.isLoading = false;
if (!settings) return;
if (settings.account.bid) this.utilsService.saveItem('bid', settings.account.bid);
}
}
My directive
@Directive({
selector: '[appMenuChildPosition]',
standalone: true
})
export class MenuChildPositionDirective implements OnChanges {
@Input() parentX?: number;
@Input() parentY?: number;
constructor(private element: ElementRef) {}
ngOnChanges(changes: SimpleChanges): void {
if (changes['parentX'] || changes['parentY']) {
this.adjustPosition();
}
}
private adjustPosition(): void {
console.log(this.parentX, this.parentY);
}
}
My template
<nav>
<ul class="menu">
<li *ngFor="let item of settings?.nav">
<p class="link" *ngIf="item.children" (click)="open($event, item)">{{ item.name[0] }}</p>
<a *ngIf="!item.children" [href]="item.name[1]">{{ item.name[0] }}</a>
<ng-container *ngIf="item.children">
<ul [class.hide]="!item.opened" class="popup-menu" [appMenuChildPosition] [parentX]="item.coords?.x" [parentY]="item.coords?.y">
<li *ngFor="let sub of item.children">
<a [href]="sub.name[1]">{{ sub.name[0] }}</a>
</li>
</ul>
</ng-container>
</li>
</ul>
</nav>