this question is quite complicated, I'm doing an app of chats in angular with different collections in firestore, I have a collection for chats, which goes first the name, then the info, as shown here: 
And then another collection with trends, which only stores the name of the chat:
Well what What I intend is to load the groups in trends, taking the name of the chat and from there taking the information of the "info" within the collection of chats
cargarTendencias() {
this.itemsCollection2 = this.afs.collection<any>( 'tendencias/' , ref => ref.limit(500) );
return this.itemsCollection2.valueChanges().pipe( map ((tendencias: any[]) => {
console.log(tendencias);
this.tendencias = [] ;
for ( const tendencia of tendencias ) {
this.tendencias.unshift( tendencia );
}
console.log(this.tendencias);
return this.tendencias;
}));
}This is the code that I have to load the trends that is wrong, and here
<div *ngFor=" let variable of _cs.grupos , let i = index">
<div class="media animated fadeIn" [routerLink]="['/chat' , variable.nombre ]" *ngIf="_cs.usuario.uid">
<div class="image-cropper" style="text-align: center;">
<img class="" [src]='variable.url'>
</div>
<div class="media-body">
<h5 class="mt-0"> {{ variable.nombre }}</h5>
{{ variable.desc }}
<hr>
</div>
</div>
</div>what is the template. I know it's a bit confusing but I'm desperate with this problem, thanks in advance!