How to setup input auto complete?

[Teebo]

I am following the example from the docs

Version: "@taiga-ui/core": "^2.22.0",

The input shows, but when I start typing, I get an error: core.mjs:6495 ERROR Error: Portals cannot be used without TuiPortalHostComponent

Am i missing an import or there is something missing in my class?

My template is below.

    <tui-input
    *tuiLet="users$ | async as users"
    formControlName="user"
    tuiTextfieldExampleText="Type your name or surname"
>
    User
    <ng-container *ngIf="users?.length">
        <tui-data-list *tuiDataList>
            <button
                *ngFor="let user of users"
                tuiOption
                [value]="user.toString()"
            >
                {{user}}
            </button>
        </tui-data-list>
    </ng-container>
</tui-input>
<ng-template #avatar>
  <tui-avatar
      *ngIf="lastUser"
      size="s"
      [rounded]="true"
      [avatarUrl]="lastUser.avatarUrl || null"
      [text]="lastUser.toString()"
  ></tui-avatar>
</ng-template>

My component class is below

import { DOCUMENT } from '@angular/common';
import {
  Component,
  Inject,
  OnInit,
  ChangeDetectionStrategy,
  ViewChild,
} from '@angular/core';
import { gsap } from 'gsap';
import {
  TUI_DEFAULT_MATCHER,
  tuiReplayedValueChangesFrom,
} from '@taiga-ui/cdk';
import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus';
import { map } from 'rxjs';
import { FormControl, FormGroup } from '@angular/forms';

class User {
  constructor(
    readonly firstName: string,
    readonly lastName: string,
    readonly avatarUrl: string | null = null,
    readonly card: string = ''
  ) {}

  toString(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

const USERS = [
  new User('Roman', 'Sedov', 'http://marsibarsi.me/images/1x1small.jpg'),
  new User('Alex', 'Inkin', 'http://marsibarsi.me/images/1x1small.jpg'),
  new User('Dmitriy', 'Demenskiy'),
  new User('Evgeniy', 'Mamaev'),
  new User('Ivan', 'Ishmametiev'),
  new User('Igor', 'Katsuba'),
  new User('Yulia', 'Tsareva'),
];

@Component({
  selector: 'app-landing-page',
  templateUrl: './landing-page.component.html',
  styleUrls: ['./landing-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LandingPageComponent implements OnInit {
  lastUser: User | null = null;
  private readonly user = new FormControl('');
  @ViewChild('avatar')
  private readonly avatar: PolymorpheusContent = '';

  constructor(@Inject(DOCUMENT) private document: Document) {}

  get isUserSelected(): boolean {
    return (
      this.lastUser !== null &&
      this.lastUser.toString().toLowerCase() ===
        this.testForm.get('user')!.value.toLowerCase()
    );
  }

  readonly testForm = new FormGroup({
    user: this.user,
  });

  readonly users$ = tuiReplayedValueChangesFrom<string>(this.user).pipe(
    map((value) => {
      const filtered = USERS.filter((user: any) =>
        TUI_DEFAULT_MATCHER(user, value)
      );

      if (
        filtered.length !== 1 ||
        String(filtered[0]).toLowerCase() !== value.toLowerCase()
      ) {
        return filtered;
      }

      this.onSelected(filtered[0]);

      return [];
    })
  );

  onSelected(user: any) {
    this.lastUser = user;
  }

  ngOnInit(): void {}

}

[waterplea]

Portals are enabled with tui-root component. Please review the getting started guide, namely this section:
https://taiga-ui.dev/getting-started#root

[Teebo]

@waterplea OK got it!

[Teebo]

@waterplea that worked! Thanks a lot