If you want to show some elements only under certain conditions, bind it to the hidden property. Hidden can conflict CSS hidden property, so using hidden is not recommended.

You can write:

import {Directive, ElementRef, Input, OnChanges, Renderer2} from "@angular/core";
@Directive({
  selector: '[hide]'
})
export class HideDirective implements OnChanges {
  @Input() hide: boolean;
 
  constructor(private renderer: Renderer2, private elRef: ElementRef) {}
 
  ngOnChanges() {
    if (this.hide) {
      this.renderer.setStyle(this.elRef.nativeElement, 'display', 'none');
    } else {
      this.renderer.setStyle(this.elRef.nativeElement, 'display', 'all');
    }
  }
}

 Bind this to the html element as shown below

<span [hide]="anyBooleanExpression"></span>