In my Angular 8 application, I need to dynamically hide a component based on a specific condition.
The condition I want to check is:
"status === EcheqSubmissionStatus.EXPIRED"
Initially, I attempted the following approach:
EcheqProcessComponent template:
<div *ngIf="currentEcheqSubmission.status === EcheqSubmissionStatus.EXPIRED">
<app-echeq-progress-nav
*ngIf="!submitting"
[currentPage]="currentEcheqPageIdx + 1"
[totalPages]="currentEcheqPath.length"
(next)="next()"
(previous)="prev()"
[isbtnDisabled]="currentEcheqSubmission.status === EcheqSubmissionStatus.EXPIRED"
[conditionals]="{
isFirst: currentEcheqPager.isFirst,
sending: sending
}"
></app-echeq-progress-nav>
</div>
EcheqProcessComponent ts file:
export class EcheqProcessComponent implements OnInit {
@ViewChild(EcheqPageComponent, {static: false}) pageComponent: EcheqPageComponent;
EcheqSubmissionStatus = EcheqSubmissionStatus;
eCheqLoaded = false;
eCheqError = false;
currentEcheqSubmission: EcheqSubmission;
currentEcheqDefinition: EcheqDefinition;
currentEcheqPages: Array<EcheqPage>;
currentEcheqPager: EcheqPager;
currentEcheqPage: EcheqPage;
currentEcheqPageIdx: number;
currentEcheqId: string;
currentEcheqPath = new Array<number>();
sending = false;
submitting = false;
However, despite implementing this solution, the navigation buttons are still not getting hidden, which should not be the case.
Here is the code snippet for the ts file of EcheqProgressNavComponent:
export class EcheqProgressNavComponent extends EcheqElementComponent implements OnInit {
EcheqSubmissionStatus = EcheqSubmissionStatus;
@Input() currentPage: number;
@Input() totalPages: number;
@Input() conditionals: { isFirst?: boolean; sending?: boolean };
@Output() previous = new EventEmitter<void>();
@Output() next = new EventEmitter<void>();
@Input() isbtnDisabled = true;
@Input() showComponent = false;
ngOnInit() {}
}
I also tried an alternative approach like this:
<div *ngIf="currentEcheqSubmission.status !== EcheqSubmissionStatus.EXPIRED">
<app-echeq-progress-nav
*ngIf="!submitting"
[currentPage]="currentEcheqPageIdx + 1"
[totalPages]="currentEcheqPath.length"
(next)="next()"
(previous)="prev()"
[conditionals]="{
isFirst: currentEcheqPager.isFirst,
sending: sending
}"
></app-echeq-progress-nav>
Even after trying this workaround, the component remains visible when it should not.