Creating ngShow directive in Angular 11

Are you wondering how to use ng-show in Angular 11? There is a way to achieve it by using [hidden]= “false”. However, if you are migrating large angularjs projects into angular 11 then it is really tedious and error prone work to convert them into [hidden]="" expression format. Also you have to negate all existing logic to show the element while using hidden. In this article I will explain how you can create your own ngShow directive in Angular 11.

So basically we are saying we want to replace below angular js code

<div ng-show="”vm.canShow()”"></div>

With Angular 11 style code like:

<div [ngShow]="”canShow()”"></div>

Since the ng-show directive is going to be used in various modules in your project. Therefore, I have decided to put this directive in a shared module.

Let’s create one shared module in angular and create a ng-show.directive.ts file.

Creating ngShow directive in Angular 11

Add below code in ng-show.directive.ts

import { Directive, ElementRef, Input } from '@angular/core'

/**
 * ## Example
 * ```html
 * <button [ngShow]="show">Create</button>
 * ```
 * ```ts
 * get show() {
 *   return false; // it will hide button. If you pass `true` it will show button.
 * }
 * ```
 */
@Directive({
  selector: '[ngShow]',
})
export class NgShowDirective {
  constructor(private ngEl: ElementRef) {}

  @Input()
  set ngShow(condition: boolean) {
    this.show(condition)
  }

  private show(value: boolean): void {
    this.ngEl.nativeElement.style.display = value ? '' : 'none'
  }
}

That’s it. Next let me show how this can be used in App Module.

How to use NgShow in Angular 11

Step 1: Import the shared module in AppModule

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SharedModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 2: Use the ngShow directive.

<div [ngShow]="show">
  <h2>We have created custom `ngShow` directive to show hide this text.</h2>
</div>

import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  show = true
}

Learning Materials

• Here is the source code link
• Here is the live working sample for ngshow live in action.

---

Thanks for reading my article till end. I hope you learned something special today. If you enjoyed this article then please share to your friends and if you have suggestions or thoughts to share with me then please write in the comment box.

💖 Say 👋 to me!
Rupesh Tiwari
Founder of Fullstack Master
Email: rupesh.tiwari.info@gmail.com
Website: RupeshTiwari.com