Similar functions of ng-show and ng-hide in Angular

If you want to show some elements only under certain conditions, 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>