How to disable condition based range in Angular4

Question

I work in an Angular4 application where I want to process a range (enable / disable) based on a condition.

When there are no products in the basket, I want to disable the interval.

But when there is at least 1 product in the basket. Range will be included.

<span class=" notification-counter badge badge-danger" data-toggle="modal" data-target="#exampleModal" style="cursor: pointer;">{{nCount}}</span> 

How can I handle this from HTML or typewriting ...

 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=> this.nCount = Count); } } 

Answer 1

Try this in your css:

 .disabled { pointer-events: none; # use this if you want to block all pointer events on element display: none; # use this if you want to hide element } .notification-counter { cursor: pointer; } 

and for your range:

 <span class='notification-counter badge badge-danger' [class.disabled]="nCount == 0" data-toggle="modal" data-target="#exampleModal">{{nCount}}</span> 

Answer 2

You can add an If * ng statement if you want to hide it. If you do not want it to be displayed. (I assume that you meant that instead of disabled people). Here it will not be displayed if the counter is 0.

Span does not act as a control, so it cannot be disabled. See which items can be disabled: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

 <span *ngIf="nCount !== 0" class="notification-counter badge badge-danger" data-toggle="modal" data-target="#exampleModal" style="cursor: pointer;">{{nCount}}</span>