I am currently working with a parent / child relationship consisting of two components: "Properties" - the parent, and "listingsList" - the child.
Below is the parent template:
<div class="row">
<div class="col-9 p-2">
<listings-list [properties] = "properties" ></listings-list>
<div *ngIf="properties?.length == 0" class="card-text bg-white p-1" i18n="@@noResult" >No results found!</div>
<div *ngIf="properties?.length! > 0 && totalNumberOfRecords == null" class="alert alert-warning my-1" role="alert" i18n="@@paginationWarning">Pagination will load shortly!</div>
<div *ngIf="properties?.length! > 0" class="btn-group float-right">
<ngb-pagination [collectionSize]="totalNumberOfRecords" [pageSize]="state!.propertiesPerPage" [(page)]="state!.page" (pageChange)="changePage($event)" [maxSize]="5" [rotate]="true" [boundaryLinks]="true"></ngb-pagination>
</div>
</div>
</div>
Here's the child component:
@Component
({
selector: "listings-list",
templateUrl:"listings-list.component.html",
styleUrls:["listings-list.component.css"]
})
export class PropertiesListComponent {
@Output()
public block:EventEmitter<Property> = new EventEmitter();
@Output()
public unBlock:EventEmitter<Property> = new EventEmitter();
@Input()
public properties: Property[] = [] ;
}
When a listing is deleted by the user, the following method is called in the parent component:
public delete(propertyId: number): void {
if (propertyId !== undefined) {
this.model.deleteProperty(propertyId)
.subscribe( _ => {
this.messageService.reportMessage(new Message(`Property ${propertyId} has been successfully deleted.`));
var status: boolean = this.propertyStatus == PROPERTY_STATE_ACTIVE ? true : false;
var filter = { createdBy: this.authService.user.userName, isActive: status, pageNumber: this.state!.page, pageSize: this.state!.propertiesPerPage };
this.model.getPropertyByFilter(JSON.stringify(filter)).subscribe(data => {
this.properties = [...data] ;
});
});
}
}
The issue I'm facing is that even though the "properties" array has changed, the change is not detected in the child component.
I understand that as long as the array reference is changed, the change should be detected.
In my case, I believe the array reference is indeed changed.
Any insights on what I might be doing incorrectly?
Appreciate any suggestions. Thank you.