ngFor not update view unless click on view Angular - arrays

Question

I tried detectChanges(), marforCheck() as well, reassign but nothing changes. They just change after I click on view again.
Scenario:
I get data from store, I tracked data change successfully in subscribe function.
this.allInfo$.subscribe(data => {
this.allInfos = data;
});
<div (click)="addInfo(social)" *ngFor="let info of allInfos"
[ngClass]="{'active': info.connected}">
<span>{{info.name}} {{info.connected}}</span>
</div>
When I click addInfo, app will open thirdparty dialog like firebase login, if success will return new data and update to allInfo$ I tracked. But the view does not changes? Is that angular bug? View change if I click somewhere on screen
My angular version 7
UPDATED: My problem was resolved by using _ngZone.run()

Answer 1

You kept the click event on the , so when you are clicking on that div it is updating.
<div *ngFor="let info of allInfos"
[ngClass]="{'active': info.connected}">
<span (click)="addInfo(social)">{{info.name}} {{info.connected}}</span>
</div>
in this code the view will update when you click on the span

Answer 2

trackBy
<div (click)="addInfo(social)" *ngFor="let info of allInfos;trackBy:trackByFunction"
[ngClass]="{'active': info.connected}">
<span>{{info.name}} {{info.connected}}</span>
</div>
.ts
trackByFunction(index, info){
if(!info)return null;
return info.id; //or return index;
}
Link:-https://medium.com/better-programming/improving-angular-ngfor-performance-through-trackby-ae4cf943b878

Answer 3

a subscription not put a "listener" in the dbs, so any change in the dbs is reflex. Each change in the dbs, you need or get the list again or add manually to your array allInfos.
You say "When I click addInfo, app will open thirdparty dialog like firebase login, if success will return new data and update to allInfo$"
I have no idea about your addInfo, so I supouse your addInfo is like
addInfo(data)
{
this.service.addData(data).subscribe(res=>{
console.log(res) //generally success
})
}
You can so some like
addInfo(data)
{
this.service.addData(data).subscribe(res=>{
if (sucess)
this.allInfos.push(data)
})
}
or
addInfo(data)
{
this.service.addData(data).pipe(
switchMap(res=>{
return res.success?this.allInfo$:of(null)
})
).subscribe(res=>{
if (res)
this.allInfos=res
})
}
It's possible that the "thirdparty dialog make a next to your $allInfo", (than all of this it's unnecesary) but I don't know. Imagine that you has a typical CRUD service like
#Injectable()
export class ProductService {
endpoint: string = '[YOUR_DB_SERVER_IP]';
constructor(
private http: HttpClient
) {}
// CREATE
createProduct(productToCreate: IProduct): Observable<IProduct[]> {
return this.http.post(`${this.endpoint}/products`, productToCreate);
}
// READ
readProducts(): Observable<IProduct[]> {
return this.http.get(`${this.endpoint}/products`);
}
// UPDATE
updateProduct(objToUpdate: IProduct): Observable<IProduct[]> {
return this.http.patch(`${this.endpoint}/products/${objToUpdate.id}`, objToUpdate};
}
// DELETE
deleteProduct(): Observable<IProduct[]> {
return this.http.delete(`${this.endpoint}/products/${objToDelete.id}`);
}
}
We are changing so, each change emit an event
private dbsChangeSubject = new Subject<any>();
dbsChange = this.dbsChangeSubject .asObservable();
// CREATE
createProduct(productToCreate: IProduct): Observable<IProduct[]> {
return this.http.post(`${this.endpoint}/products`, productToCreate).pipe(
tap(result=>{
if (result.success)
this.dbsChangeSubject.next(true)
}))
);
}
// UPDATE
updateProduct(objToUpdate: IProduct): Observable<IProduct[]> {
return this.http.patch(`${this.endpoint}/products/${objToUpdate.id}`, objToUpdate.pipe(
tap(result=>{
if (result.success)
this.dbsChangeSubject.next(true)
}))
);;
}
// DELETE
deleteProduct(): Observable<IProduct[]> {
return this.http.delete(`${this.endpoint}/products/${objToDelete.id}`).pipe(
tap(result=>{
if (result.success)
this.dbsChangeSubject.next(true)
}))
);
}
}
Know we can subscribe to
this.service.dbsChange().pipe(
startWith(true),
switchMap(()=>{
this.service.readProducts()
})).subscribe(res=>{
this.products=res
})
Here we subscribe to "dbsChange", not to readProducts(), so we are listen to all the this.dbsChangeSubject.next that we has

Answer 4

As dlam said in his edited question, using NgZone in the new window solves the problem.
Example:
import { NgZone} from '#angular/core';
export class NewWindowComponent implements OnInit{
constructor(private ngZone: NgZone) { }
ngOnInit() {
this.someService.getChangedData.subscribe(data => {
this.ngZone.run(() => {
this.someData= data;
});
});
}
}