how can I access the variables of a service in the template of a component in angular

Question

I have a service where I make a request to an api and I get the data. then in the .ts file, I store that data in a service variable. now the problem arises when I try to access that service variable in the .html of that component xq that variable is not defined in the .ts, that is, it is not the component but the service. How could I access this service variable from several components?

este es el codigo de mi servicio:

 import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders} from '@angular/common/http'; import { Inmueble } from '../modelos/inmueble'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class HostlistService { inmuebles: Inmueble[] = []; cabecera = { 'Accept': 'application/json', 'Authorization': "" } parametros = { 'grant_type':'client_credentials', 'client_id': 3, 'client_secret': '' } constructor(public http: HttpClient) { } obtenerToken(){ return this.http.post<any>('https:',this.parametros); } obtenerInmuebles(resultToken){ this.cabecera.Authorization=resultToken.token_type+" "+resultToken.access_token; console.log("----->"+this.cabecera.Authorization); return this.http.get<any>('',{ headers: new HttpHeaders(this.cabecera) }); } }

This is the code of the component where you called that service and saved the data in a service variable:

 import { Component, OnInit, Input } from '@angular/core'; import { HostlistService } from '../servicios/hostlist.service'; import { Inmueble } from '../modelos/inmueble'; import { mergeMap } from 'rxjs/operators'; @Component({ selector: 'app-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.component.css'] }) export class SliderComponent implements OnInit { z: number=0; url: string = "URL"; constructor(private hostlistService: HostlistService) { } ngOnInit() { this.hostlistService.obtenerToken() .pipe( mergeMap(resultToken => { //do whatever you want to do with the token //ie Save the token in the localstorage like this - localStorage.setItem("token",resultToken.access_token); return this.hostlistService.obtenerInmuebles(resultToken); }) ) .subscribe( result => { this.cargarJson(result); },error =>{ console.log(error); } ); } /*this.hostlistService.getInmuebles().subscribe( result => { console.log("-----------_>"+result.data); },error => { console.log(error); } );*/ /* anteriorInmueble(){ (this.i<=0) ? this.i=680: this.i=this.i-5; console.log("AntIn VALOR DE I: "+this.i); siguienteInmueble(){ (this.i>=680) ? this.i=0: this.i=this.i+5; console.log("SigIn VALOR DE I: "+this.i); }*/ // metodo para cargar el Json recibido de la petición cargarJson(result){ var foto1,foto2: string; foto1 = "fot0", foto2 = "fot"; var precio: number=0; var i,j: number=1; for(const item of result.data) { var pos: number=0; //variable que define la posicion a almacenar en el vector pos =0; console.log("POS----->"+pos); var inmueble = new Inmueble(); inmueble.fotos = []; inmueble.nombre = item.nomb_prod_c; inmueble.id = item.id_c; inmueble.estacionamiento = item.estan_c; inmueble.baño = item.banof_c; precio = item.price; precio = Math.round(precio*100)/100; inmueble.precio = precio; (item.fot01_c != "") ? (inmueble.fotos[pos]="fot01_c", pos++): (inmueble.fotos[pos]=""); (item.fot02_c != "") ? (inmueble.fotos[pos]="fot02_c", pos++): (inmueble.fotos[pos]=""); (item.fot03_c != "") ? (inmueble.fotos[pos]="fot03_c", pos++): (inmueble.fotos[pos]=""); (item.fot04_c != "") ? (inmueble.fotos[pos]="fot04_c", pos++): (inmueble.fotos[pos]=""); (item.fot05_c != "") ? (inmueble.fotos[pos]="fot05_c", pos++): (inmueble.fotos[pos]=""); (item.fot01_c != "") ? (inmueble.fotos[pos]="fot06_c", pos++): (inmueble.fotos[pos]=""); (item.fot02_c != "") ? (inmueble.fotos[pos]="fot07_c", pos++): (inmueble.fotos[pos]=""); (item.fot03_c != "") ? (inmueble.fotos[pos]="fot08_c", pos++): (inmueble.fotos[pos]=""); (item.fot04_c != "") ? (inmueble.fotos[pos]="fot09_c", pos++): (inmueble.fotos[pos]=""); (item.fot05_c != "") ? (inmueble.fotos[pos]="fot10_c", pos++): (inmueble.fotos[pos]=""); (item.fot01_c != "") ? (inmueble.fotos[pos]="fot11_c", pos++): (inmueble.fotos[pos]=""); (item.fot02_c != "") ? (inmueble.fotos[pos]="fot12_c", pos++): (inmueble.fotos[pos]=""); (item.fot03_c != "") ? (inmueble.fotos[pos]="fot13_c", pos++): (inmueble.fotos[pos]=""); (item.fot04_c != "") ? (inmueble.fotos[pos]="fot14_c", pos++): (inmueble.fotos[pos]=""); (item.fot05_c != "") ? (inmueble.fotos[pos]="fot15_c", pos++): (inmueble.fotos[pos]=""); (item.fot01_c != "") ? (inmueble.fotos[pos]="fot16_c", pos++): (inmueble.fotos[pos]=""); (item.fot02_c != "") ? (inmueble.fotos[pos]="fot17_c", pos++): (inmueble.fotos[pos]=""); (item.fot03_c != "") ? (inmueble.fotos[pos]="fot18_c", pos++): (inmueble.fotos[pos]=""); (item.fot04_c != "") ? (inmueble.fotos[pos]="fot19_c", pos++): (inmueble.fotos[pos]=""); (item.fot05_c != "") ? (inmueble.fotos[pos]="fot20_c", pos++): (inmueble.fotos[pos]=""); if(pos == 0){ inmueble.fotos[pos]="n"; } this.hostlistService.inmuebles.push(inmueble); //se almacena el inmueble en el vector de inmuebles } //console.log("************:"+this.inmuebles[1].fotos[0]); } anteriorInmueble(){ (this.z<=0)? this.z=680: this.z=this.z-1; } siguienteInmueble(){ (this.z>=680)? this.z=0: this.z=this.z+1; } consultarPais(){ } }

I want to be able to access the service array in the multi-component .html template. How could I do it? I have read that with observables and using BehaviorSubject but I understand absolutely nothing of observables for more than I have read, I do not know how to do. Thanks in advance to anyone who can help me, I would greatly appreciate it.

Answer 1

Make your service public,as constructor(public hostlistService: HostlistService) then inside the template you can do something like,

<div *ngFor="let data of this.hostlistService.inmuebles">
  <span>{{data}}</span>
</div>

In short inside template use this.hostlistService.inmuebles to access it.

Answer 2

Do need to include “this.” In the template, just “ hostlistService.inmuebles”.