CODEWITHSUNDEEP
angular
angularlearn
angularlearn

Reputation: 1

Angular: How to use data from a service into component html

Im trying to use a service i made from a component.

I have the following service:

import { Injectable } from '@angular/core';
import { PicItem } from './Models/Pictures';

@Injectable()
export class PicturesService {

  private readonly time = 10000;
  public image1:string = "";
  public image2:string = "";
  private _picList: string[];
  private index: number = 0;

  constructor() { 
       this._picList = [
       "",
       ""
  ]

      setInterval(() => {
        this.image1 = this.getImage();
        this.image2 = this.getImage();
      }, this.time);
  }

 getImage(){
    return this._picList[this.index++];
  }

}

This service should switch two pictures url in image1 and image2.

So now i have a component which i want to call this service, and get the urls form image1 and image2.

What is the correct way to use image1/2 urls inside the components html file?

I tried doing something like

<img src = {{image1}}>

But it doesn't seem to work.

Thanks.

EDIT:

In the component i get the image like so:

export class GalleryComponent implements OnInit {

  constructor(public pictureService: PicturesService) { 
    var pic1 = this.pictureService.image1;
  }

Which to my understanding, gets back the value of image1 from the service.

The problem is how to use this value inside the HTML file.

Upvotes: 0

Views: 47

Answers (1)

tano
tano

Reputation: 2817

you can use component attributes in the template:

export class GalleryComponent implements OnInit {
  pic1:any;
  constructor(public pictureService: PicturesService) { 
    this.pic1 = this.pictureService.image1;
  }

or use the service in template:

<img src="{{pictureService.image1}}">

Upvotes: 1

Related Questions