How to disable span based on conditions in Angular4

Question

I am working in an Angular4 application, where I want to handle the span (enable/disable) based on a condition.

When there's no items in the cart I want to disable the span.

But when there's at least 1 product in the cart. The span will be enabled.

 <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 typescript side..

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 span:

<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 statement *ngIf you want to hide it. If you don't want it displayed. (I'm assuming you meant that instead of disabled). Here it will not display if the count is 0.

Span doesn't act as a control, therefore it isn't possible to disable. See the following list for what elements 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>