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",