title: How to disable span based on conditions in Angular4
body: <p>I am working in an Angular4 application, where I want to handle the span (enable/disable) based on a condition.</p>
  
  <p>When there's no items in the cart I want to disable the span.</p>
  
  <p>But when there's at least 1 product in the cart. The span will be enabled.</p>
  
  <p><a href="https://i.stack.imgur.com/7hM9L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7hM9L.png" alt="enter image description here"></a> </p>
  
  <pre><code> &lt;span class=" notification-counter badge badge-danger" data-toggle="modal" data-target="#exampleModal" style="cursor: pointer;"&gt;{{nCount}}&lt;/span&gt;
  </code></pre>
  
  <p>How can I handle this, from HTML or typescript side..</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { DatePipe } from '@angular/common';
  import { HostListener } from '@angular/core';
  import {CartdataService} from './cartdata.service';
  
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  
  })
  
  export class AppComponent implements OnInit{
      nCount : string;
      constructor(private CartdataService:CartdataService,private http: HttpClient) { }
  
      ngOnInit() {
          this.CartdataService.cast.subscribe(Count=&gt; this.nCount = Count);
  
      }
  }
  </code></pre>