CODEWITHSUNDEEP
angular
Shiladittya Chakraborty
Shiladittya Chakraborty

Reputation: 4418

Get dynamic counter inside of HTML pages using angualr service

I want to display count above on link. For that I am having one html tag as below

<a class="p-2 text-dark" href="#" [routerLink]="['/viewcart']">View cart<span class="badge my-badge">2</span></a>

Above code is working fine. As you can see 2 is the static number but I need to get dynamic counter from one service.

For that I am having one service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class CartService {

  public shoppingCartData: 10;
  constructor(private http: HttpClient) { }  
}

From that service I need to display count. I need to get this value inside of above HTML file.

Upvotes: 0

Views: 85

Answers (1)

georgeos
georgeos

Reputation: 2511

In your .ts file of the component, you should inject your service.

constructor(private cartService: CartService) {}

Then use it on your code, for example:

ngOnInit() { this.componentVariable = this.cartService.shoppingCartData; }

And in your html code, bind your variable.

<a class="p-2 text-dark" href="#" [routerLink]="['/viewcart']">View cart<span class="badge my-badge">{{ componentVariable }}</span></a>

For your reference about data binding, you can check Angular Documentation.

Upvotes: 1

Related Questions