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>