How can i fix that code inside my angular component?

I'm using taiga ui to create my component for a project in angular. When i try to reuse a button component with a DropDownElement it will not be displayed and the console return me the error: ERROR TypeError: Cannot read properties of undefined (reading 'createComponent')

There is the code where I insert the component

<tui-badge>Test</tui-badge>
</span>
<hr />
<button
iconStart="@tui.bell"
tuiIconButton
type="button"
>
Notifications
<tui-badge-notification />
</button>
<app-user-avatar-dropdown></app-user-avatar-dropdown>
</header>


and the ts code is:

import { CommonModule } from '@angular/common';
import { KeyValuePipe, NgForOf} from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule} from '@angular/forms';
import { RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
import { tuiAsPortal, TuiPortals, TuiRepeatTimes} from '@taiga-ui/cdk';
import {
TuiAppearance,
TuiButton,
TuiDataList,
TuiDropdown,
TuiDropdownService,
TuiIcon,
TuiTitle,
} from '@taiga-ui/core';
import {
TuiAvatar,
TuiBadge,
TuiBadgeNotification,
TuiChevron,
TuiDataListDropdownManager,
TuiFade,
TuiSwitch,
TuiTabs,
} from '@taiga-ui/kit';
import { TuiCardLarge, TuiHeader, TuiNavigation} from '@taiga-ui/layout';
import { UserAvatarDropdownComponent } from '../../shop/components/user-avatar-dropdown/user-avatar-dropdown.component';

const ICON =""; // not very important right?

@Component({
selector: 'app-layout',
standalone: true,
imports: [
CommonModule,
FormsModule,
KeyValuePipe,
NgForOf,
RouterLink,
RouterLinkActive,
RouterOutlet,
TuiAppearance,
TuiAvatar,
TuiBadge,
TuiBadgeNotification,
TuiButton,
TuiCardLarge,
TuiChevron,
TuiDataList,
TuiDataListDropdownManager,
TuiDropdown,
TuiFade,
TuiHeader,
TuiIcon,
TuiNavigation,
TuiRepeatTimes,
TuiSwitch,
TuiTabs,
TuiTitle,
UserAvatarDropdownComponent,
],
templateUrl: './layout.component.html',
styleUrl: './layout.component.css',
providers: [TuiDropdownService, tuiAsPortal(TuiDropdownService)],
})

export class LayoutComponent extends TuiPortals {
protected expanded = false;
protected open = false;
protected switch = false;
//protected readonly routes = DemoRoute;

protected readonly drawer = {
Components: [
{name: 'Button', icon: ICON},
{name: 'Input', icon: ICON},
{name: 'Tooltip', icon: ICON},
],
Essentials: [
{name: 'Getting started', icon: ICON},
{name: 'Showcase', icon: ICON},
{name: 'Typography', icon: ICON},
],
};
}


and here the code of the button that doesn't work properly:

@if (profile()) {
<button
appearance="flat"
tuiButton
type="button"
[tuiAppearanceState]="open ? 'hover' : null"
[tuiDropdown]="content"
[(tuiDropdownOpen)]="open"
>
{{ profile() }}
</button>
} @else {
<button
appearance="flat"
iconStart="@tui.user"
tuiIconButton
type="button"
[tuiAppearanceState]="open ? 'hover' : null"
[tuiDropdown]="content"
[(tuiDropdownOpen)]="open"
></button>
}

<ng-template #content>
<tui-data-list>
@if (profile()) {
<button tuiOption [routerLink]="['/shop/account']">
<div class="flex flex-row items-center justify-items-start">
<tui-icon icon="@tui.user-pen" class="mr-2" />
Profile
</div>
</button>

<button tuiOption (click)="logout()">
<div class="flex flex-row items-center justify-items-start">
<tui-icon icon="@tui.log-out" class="mr-2" />
Log out
</div>
</button>

} @else {
<button tuiOption (click)="showDialog()">
<div class="flex flex-row items-center justify-items-start">
<tui-icon icon="@tui.log-in" class="mr-2" />
Sign In
</div>
</button>
}
</tui-data-list>
</ng-template>


import { Component, computed, inject, INJECTOR, Signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TuiDataListDropdownManager } from '@taiga-ui/kit';
import {
TuiButton,
TuiDataList,
TuiDialogService,
TuiDropdown,
TuiIcon,
TuiIconPipe,
TuiOption,
} from '@taiga-ui/core';
import { RouterLink } from '@angular/router';
import { AuthModalComponent } from '../auth-modal/auth-modal.component';
import { UserMeService } from '../../features/users/user-me.service';
import { AuthService } from '../../features/auth/auth.service';
import { PolymorpheusComponent } from '@taiga-ui/polymorpheus';

@Component({
selector: 'app-user-avatar-dropdown',
standalone: true,
imports: [
CommonModule,
TuiButton,
TuiDropdown,
TuiDataListDropdownManager,
TuiDataList,
TuiOption,
TuiIcon,
TuiIconPipe,
RouterLink,
AuthModalComponent,
],
templateUrl: './user-avatar-dropdown.component.html',
styleUrl: './user-avatar-dropdown.component.css',
})
export class UserAvatarDropdownComponent {
private readonly dialogs: TuiDialogService = inject(TuiDialogService);
private readonly injector = inject(INJECTOR);
private readonly userMeService: UserMeService = inject(UserMeService);
private readonly authService: AuthService = inject(AuthService);

// Whether the dropdown is open
protected open = false;
protected dropdownOpen = false;

// Stores the user's profile whether it is logged in or not
profile: Signal<string | null> = computed(() => {
const user = this.userMeService.state.asReadonly()();

if (Object.keys(user).length !== 0)
return `${user.firstName[0]}${user.familyName[0]}`;
else return null;
});

/**
* The dialog to show when the user clicks on the "Sign In/Up" button
*/
private readonly dialog = this.dialogs.open<boolean>(
new PolymorpheusComponent(AuthModalComponent, this.injector),
{
dismissible: true,
label: 'Join the party!',
},
);

/**
* Opens the dropdown
*/
showDialog(): void {
this.dialog.subscribe();
}

/**
* Logs the user out
*/
logout(): void {
this.authService.logout().subscribe({
next: () => {
this.open = false;
},
});
}
}


it's like two hours that I'm try different solution, without result. So the question is: how can i make the user button work properly??

Continue reading...