角度11でngshowディレクティブを作成する

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.

だから基本的に我々は角度JSコードの下に置き換えたいと言っている

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

以下のような角度11スタイルのコードを使用します.

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

以来ng-show ディレクティブは、プロジェクト内のさまざまなモジュールで使用されます.したがって、このディレクティブを共有モジュールに置くことにしました.
つの共有モジュールをアングルで作成してng-show.directive.ts ファイル.


角度11でngshowディレクティブを作成する
以下のコードを加えるng-show.directive.ts

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

/**
 * ## Example
 * ```

html
 * <button [ngShow]="show">Create</button>
 *

```
TS

show show ()

falseを返します;/それはボタンを非表示になります.パスするならtrue ボタンが表示されます.

}
*
「
*/
ディレクティブ
セレクタ:'[ ngshow ]',
))>
クラスをエクスポート
コンストラクタ(private ngel : elementref){}

@ input ()
ngshow ( condition : boolean )を設定する
これ.示威する
｝
private show ( value : boolean ): void {
これ.NGLNativeElementスタイル.ディスプレイ=値?なし
｝
｝

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 ()
宣言:[ appcomponent ],
インポート:[ BrowserModule , ShareModule ]
プロバイダ:[]
ブートストラップ
))>
クラスの追加モジュール

### Step 2: Use the `ngShow` directive.

カスタムを作成しましたngShow このテキストを隠す指示.
@角/コアからのimport { component }
コンポーネント名
セレクタ:' app root '
templateurl :'/アプリ.コンポーネント.HTML '
))>
クラスをエクスポート
地図を表示
｝

## Learning Materials

- Here is the [source code link](https://github.com/rupeshtiwari/ng-show-angular11)
- Here is the [live working sample](https://www.rupeshtiwari.com/ng-show-angular11/) 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](https://www.fullstackmaster.net)  
Email: [[email protected]](mailto:[email protected]?subject=Hi)  
Website: [RupeshTiwari.com](https://www.rupeshtiwari.com)

![](https://imgur.com/5fBatz9.png)