Can't bind to 'value' since it isn't a known property of 'p-galleria'

I must be doing something stupid as I can't find this problem anywhere else. I'm trying to use Galleria from PrimeNG but I can't get past the basics. I am using lots of other PrimeNG components with no problem.

I have an Angular project.

In my app.module.ts I have:

import { BrowserModule } from '@angular/platform-browser';
import {ApplicationRef, DoBootstrap, NgModule} from '@angular/core';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {AutoCompleteModule} from 'primeng/autocomplete';
import {AccordionModule} from 'primeng/accordion';
import {ButtonModule} from 'primeng/button';
import {FileUploadModule} from 'primeng/fileupload';
import { GalleriaModule } from 'primeng/galleria';

import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import {HeaderComponent} from './header/header.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {DropdownDirective} from './model/dropdown.directive';
import { LoginButtonComponent } from './login-button/login-button.component';
import {RecipeService} from './services/recipe.service';
import {ShoppingListService} from './shopping-list/shopping-list.service';
import {AppRoutingModule} from './app-routing.module';
import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
import {DataStorageService} from './services/data-storage.service';
import {RecipeEditMainComponent} from './recipes/recipe-edit/recipe-edit-main/recipe-edit-main.component';
import { RecipeEditIngredientsComponent } from './recipes/recipe-edit/recipe-edit-ingredients/recipe-edit-ingredients.component';
import { RecipeEditMethodsComponent } from './recipes/recipe-edit/recipe-edit-methods/recipe-edit-methods.component';
import { SandboxComponent } from './sandbox/sandbox.component';
import { RecipeEditImagesComponent } from './recipes/recipe-edit/recipe-edit-images/recipe-edit-images.component';
import { SignUpComponent } from './accounts/sign-up/sign-up.component';
import { ForgotPasswordComponent } from './accounts/forgot-password/forgot-password.component';
import { SignInComponent } from './accounts/sign-in/sign-in.component';
import { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';
import { ErrorComponent } from './error/error.component';
import { AddUnitComponent } from './modal/add-unit/add-unit.component';
import { ConfirmDeleteComponent } from './modal/confirm-delete/confirm-delete.component';
import { CommentComponent } from './modal/comment/comment.component';

@NgModule({
declarations: [
AppComponent,
HeaderComponent,
RecipeListComponent,
RecipeDetailComponent,
RecipeItemComponent,
ShoppingListComponent,
ShoppingEditComponent,
DropdownDirective,
LoginButtonComponent,
RecipeStartComponent,
RecipeEditComponent,
RecipeEditMainComponent,
RecipeEditIngredientsComponent,
RecipeEditMethodsComponent,
SandboxComponent,
RecipeEditImagesComponent,
SignUpComponent,
ForgotPasswordComponent,
SignInComponent,
LoadingSpinnerComponent,
ErrorComponent,
AddUnitComponent,
ConfirmDeleteComponent,
CommentComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
NgbDropdownModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
AutoCompleteModule,
AccordionModule,
ButtonModule,
FileUploadModule,
GalleriaModule
],
providers: [RecipeService,
ShoppingListService,
HttpClient,
DataStorageService],
bootstrap: [AppComponent]
})
export class AppModule {}


I have a sandbox.component.ts that looks like this:

import {AfterViewInit, Component, OnInit} from '@angular/core';


@Component({
selector: 'app-sandbox',
templateUrl: './sandbox.component.html',
styleUrls: ['./sandbox.component.css']
})
export class SandboxComponent implements OnInit {

images: [
{
previewImageSrc: 'images/603RawSteak.jpg',
thumbnailImageSrc: 'images/603RawSteak.jpg',
alt: 'Description for Image 1',
title: 'Title 1'
},
{
previewImageSrc: 'images/75CookedSteak.jpg',
thumbnailImageSrc: 'images/75CookedSteak.jpg',
alt: 'Description for Image 2',
title: 'Title 2'
}
];

responsiveOptions: any[] = [
{
breakpoint: '1024px',
numVisible: 5
},
{
breakpoint: '768px',
numVisible: 3
},
{
breakpoint: '560px',
numVisible: 1
}
];

constructor() {}

ngOnInit(): void {

}

}


I have a sandbox.component.html file that looks like this:

<p-galleria [(value)]="images">
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc" style="width: 100%;" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
<div class="p-grid p-nogutter p-justify-center">
<img [src]="item.thumbnailImageSrc" />
</div>
</ng-template>
</p-galleria>


I've tried to keep it as simple as possible. But I get the following error:

ERROR in src/app/sandbox/sandbox.component.html:1:13 - error NG8002: Can't bind to 'value' since it isn't a known property of 'p-galleria'.
1. If 'p-galleria' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'p-galleria' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.


Other info...

C:...>npm view primeng version
9.1.3


What's going on?

Continue reading...