I am facing an issue with a component (dialog-component) that references another component (DATA-component). In the dialog-component-ts file, when I set
isLoaded = false
and then use
this.isLoaded.emit(true);
in DATA-component, the isLoaded value in dialog-component-ts is correctly set to true. However, the mat-spinner keeps spinning and the loaded data is not displayed. Interestingly, I have similar code in other components where it works perfectly fine. On the other hand, when I set
isLoaded = true
in dialog-component-ts, the spinner disappears and the data shows up as expected. Any insights on what might be causing this issue?
dialog-component-html:
<mat-card>
<div *ngIf="!isLoaded" fxLayout="row" fxLayoutAlign="center center" class="loading">
<mat-spinner></mat-spinner>
</div>
<app-data *ngIf="selectedDialogData === enum1" [fxShow]="isLoaded"
(title)="onComponentTitleChange($event)"
(isLoaded)="onComponentReadyStateChange($event)"
(dialogDataChanged)="onSelectedDialogDataChange($event)">
</app-data>
</mat-card>
dialog-component-ts:
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DialogComponent {
constructor(
@Inject(MAT_DIALOG_DATA) public dialogData: SomeModel) { }
public isLoaded = false;
...
public onComponentReadyStateChange(state) {
this.isLoaded = state;
}
...
data-component-ts:
@Component({
selector: 'app-data',
templateUrl: './data.component.html',
styleUrls: ['./data.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class WorkingtypeDataComponent implements OnInit {
@Output() title = new EventEmitter<string>();
@Output() isLoaded = new EventEmitter<boolean>();
@Output() dialogDataChanged = new EventEmitter<EnumList>();
constructor(@Inject(MAT_DIALOG_DATA) public dialogData: SomeModel,
private dialogRef: MatDialogRef<DialogComponent>,
private formBuilder: FormBuilder,
private Service: SomeService,
private dialog: MatDialog) { }
ngOnInit(): void {
this.isLoaded.emit(false);
this.currentElement = this.dialogData.changeElement;
this.alreadyExistingElementNames = this.dialogData.alreadyExistingElementNames;
this.isEditing = this.currentElement.name != null;
const title = `texts.${this.isEditing ? 'edit' : 'add'}`;
this.title.emit(title);
this.isLoaded.emit(true);
}