I'm using Angular framework Primeng p-carousel to show some vacabulary cards. On the vocabulary card, I am using p-inplace to hide some information, before the user try to solve the question, those information remain hidden.I assigned each p-inplace a custom unique attribute wordId inorder to access each specific p-inplace when user clicked the p-inplace's show button, because by default the Primeng Inplace always show hidden info after the click event, but I want to check if the user have tried to solve the question already, if one hadn't, clicking won't trigger Inplace to show the info.The HTML code is showing below:
<p-carousel [value]="words2Learn" [numVisible]="1" [numScroll]="1" [showNavigators]="false"
[showIndicators]="false" [page]="wordIdx" itemStyle="width:100%">
<ng-template let-word pTemplate="item">
<p-fieldset legend={{word.wordDto.bookNameCh}}
class="card flex flex-column md:flex-row md:align-items-center justify-content-around">
<div>
<p class="mb-1 font-black text-6xl">{{ word.wordDto.wordName }}</p>
</div>
</p-fieldset>
<p-fieldset legend="Details">
<p-accordion [activeIndex]="[0,1,2,3,4,5]" [multiple]="true">
<p-accordionTab *ngIf="word.wordDto.remMethods.length > 0" [disabled]=" detailsDisabled"
header="Remember Method">
<p-inplace #rem [active]="showRem" [attr.wordId]="word.wordDto.id"
(onActivate)="showDetails($event, 'rem',word.wordDto.id)">
<ng-template pTemplate="display">
<i class="pi pi-lock flex justify-content-center" style="font-size: 3rem"></i>
</ng-template>
<ng-template pTemplate="content">
<span
class="font-bold flex justify-content-center">{{word.wordDto.remMethods[0].method}}</span>
</ng-template>
</p-inplace>
</p-accordionTab>
</p-accordion>
</p-fieldset>
</p-carousel>
I know activate() and deactivate() methods of Inplace can show and hide, so I'd like to manually decide whether or not to show the info according to a condition, while the condition here is not important, say it is a simple boolean variable that can be assigned by some logic. I tried to use (onActivate) hook to capture the click event, passing a function showDetails($event, 'sen', word.wordDto.id) to it. Where word.wordDto.id is also the custom attribut [attr.wordId] for the current p-inplace, so I can use this to locate which p-inplace is been clicking. Inside showDetails(), I tried to find the current p-inplace by using elementRef and @ViewChildern and attribute [attr.wordId], though I can access the right p-inplace, but the problem is I can't find a way to evoke the activate(event) and deactivate(event) function.
The .ts code is shown below:
export class DashboardComponent implements OnInit, OnDestroy {
@ViewChild('usPhoneUrl') usPhone!: HTMLAudioElement
@ViewChildren('rem', { read: ElementRef }) rem!: QueryList<ElementRef>
showDetails(event: Event, component: string, wordId: string) {
if (!this.haveTried) {
this.messageService.add({ severity: 'warn', summary: 'Warn', detail: "Try first!" });
switch (component) {
case 'rem':
(this.rem.toArray()
.filter(x => x.nativeElement.getAttribute('wordId') === wordId)[0]
.nativeElement as Inplace).deactivate(event);
break;
......
default:
break;
}
}
Note this.haveTried is the condition to evoke activate() or deactivate().
The error from browser is:
TypeError: this.cog.toArray(...).filter(...)[0].nativeElement.deactivate is not a function
It seems the as Inplace didn't do the convert work. When I tried to console.log(XXX.nativeElement as Inplace), I still got html element rather than Inplace instance, I guess that's why I can't access the method.
I also tried @ViewChildren('rem', { read: Inplace }) rem!: QueryList<Inplace>, in this way I can get an array of Inplace instances and for each one to call activate() and deactivate(), but how can I filter ther right p-inplace html element then?
I have tried all I can do, any one help!
BTW I'm using "primeng": "17.18" and
"@angular/animations": "^17.0.5",
"@angular/cdk": "^17.0.2",
"@angular/common": "^17.0.5",
"@angular/compiler": "^17.0.5",
"@angular/core": "^17.0.5",
"@angular/forms": "^17.0.5",
"@angular/platform-browser": "^17.0.5",
"@angular/platform-browser-dynamic": "^17.0.5",
"@angular/router": "^17.0.5",
You can simply pass the template reference variable as a parameter to the function, then call the deactivate function. Working demo below.
import { Component } from '@angular/core';
import { ImportsModule } from './imports';
import { Inplace } from 'primeng/inplace';
@Component({
selector: 'inplace-basic-demo',
templateUrl: './inplace-basic-demo.html',
standalone: true,
imports: [ImportsModule],
})
export class InplaceBasicDemo {
showDetails(event: any, rem: Inplace) {
console.log(event, rem);
alert('cannot open this!');
rem.deactivate(event);
}
}
<div class="card">
<p-inplace #rem (onActivate)="showDetails($event, rem)">
<ng-template pTemplate="display">
<span>View Content</span>
</ng-template>
<ng-template pTemplate="content">
<span
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irur e dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</span
>
</ng-template>
</p-inplace>
</div>