Can't bind to 'hideOnOutsideClick' in Angular

[morsagmon]

Hello team.

I pasted a Prime Block for top navigation with my Angular 16 app, and I'm getting this error:

Code: Select all

Can't bind to 'hideOnOutsideClick' since it isn't a known property of 'a'.ngtsc(-998002)

It is on several lines in the html template where the hideOnOutsideClick is referenced. Example:

Code: Select all

<a pRipple class="cursor-pointer block lg:hidden text-gray-400" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">

In my component controller, I have these imports:

Code: Select all

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { ToolbarModule } from 'primeng/toolbar';
import { StyleClassModule } from 'primeng/styleclass';
import { RippleModule } from 'primeng/ripple';
import { ButtonModule } from 'primeng/button';

@Component({
  selector: 'app-top-nav',
  standalone: true,
  imports: [CommonModule, ToolbarModule, StyleClassModule, RippleModule, ButtonModule],
  templateUrl: './top-nav.component.html',
  styleUrls: ['./top-nav.component.scss']
})

In my styles.scss, I have these:

Code: Select all

@import "primeng/resources/themes/nano/theme.css";
@import "primeng/resources/primeng.min.css";
@import "primeng/resources/primeng.css";
@import "primeflex/primeflex.css";
@import "primeicons/primeicons.css";

body {
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

What am I missing, please?
Thanks!