Programmatically update NGPrime Panel style property

Question

I'm fairly new to Angular and not sure if I'm doing something wrong in TS or with the PrimeNG component.

I have a simple reactive form and all I'm trying to do is update a style property when submitted.

My panel component loads from HTML including the custom style.

<p-panel header="No payment required.." [style]="{margin:'.5rem 2rem'}">

In the component TS I use ViewChild to get a handle on it.

@ViewChild(Panel, { static: false }) _Panel!: Panel;

I'm also trying to hook change detection BUT only because the PrimeNG panel doesn't seem to be updating? I may not need it?

@Component({
  changeDetection: ChangeDetectionStrategy.Default
})
constructor(private cd: ChangeDetectorRef) { }

During a button click event the _Panel object does update but the UI does not?

this._Panel.style = { display: 'none' };
this.cd.detectChanges();
this.cd.markForCheck();

What am I doing wrong?

Answer 1

If you are just trying to change whether it is visible or not, I would use the *ngIf="..." structural directive, and bind that to a field/property in your component that you can just set to true or false depending on when you want it to show up in your html :)

@Component({
    ...
    // You don't need to specify changeDetection: ChangeDetectionStrategry.Default
})
export class MyFormComponent {
    ...

    panelVisible = true;


    myMethodThatChangesPanelVisibility(...) {
        this.panelVisible = false
    }
}

<p-panel *ngIf="panelVisible" header="No payment required.." style="margin: .5rem 2rem;">

Also, notice that you don't need to use Angular attribute directive binding on the style attribute because the expression inside isn't going to change. So I removed the square brackets and curly brackets from what you had above.