Angularにng-bootstrapをインストールする方法と使い方

求人
Angularにng-bootstrapをインストールする方法と使い方

ng-bootstrap をインストールする方法です。

ng-bootstrap は、bootstrap に依存するので、bootstrap をインストールします。

app.module.tsファイルを修正します。

app.module.ts

angular.jsonファイルを修正します。

angular.json

これで、ng-bootstrapが使えるようになります。

ng-bootstrap を使ったタブを作成してみます。

(tabChange)イベントバインディングを使用する

(tabChange)というイベントバインディングが使用できます。

ngb-tabsetタグに設定します。

ngbTabContentがないと表示されません。以下、実行例です。

Angularにng-bootstrapをインストールする方法

ちなみに、ngb-tabタグにイベントバインディング(click)や(select)を指定してみましたが実行されませんでした。

アクティブなngb-tabを調べる

どのngb-tabがアクティブかを調べるにはngb-tabにid属性を指定します。これは必ず指定しておいた方が良いです。でないとactiveIdプロパティやnextIdプロパティで取得できるidは適当になってしまいます。

以下、例です。

nextIdプロパティから、タブを変更したタイミングで現在アクティブなタブのid属性が取得できます。

Angularにng-bootstrapをインストールする方法と使い方

ボタンでタブをアクティブにする

ngb-tabsetタグに#xxx=ngbTabsetとつけることでタブを操作できます。

例えばボタンをクリックすると一番右のタブをアクティブにする、などです。

実装は以下の通りid属性も必要になります。

上記のようにすることでアクティブなタブを指定することができます。

Angularにng-bootstrapをインストールする方法と使い方

タブ内のフォーム部品の値を保持する

各タブにフォーム部品がある場合、タブを遷移しても値を保持していたいです。が、デフォルトではタブを遷移すると値が消えてしまうようです。

これを実行してみます。タブを遷移して元のタブに戻るとフォーム部品の入力値は保持されないことが確認できます。

Angularにng-bootstrapをインストールする方法と使い方

これを保持するように属性で変更することができます。

このように属性を追加します。省略した場合、デフォルトはtrueのようです。

Angularにng-bootstrapをインストールする方法と使い方

タブ遷移してもフォーム部品の入力値が保持されることが確認できます。

ちなみにdestroyOnHideをtrueにすると、タブ内のコンポーネントは初期表示時にインスタンス生成されるようになります。falseの場合、タブを変えたタイミングでタブ内のコンポーネントが毎回生成される動きになります。

タブを非表示にする

タブを非表示にするには*ngIf=falseとすれば非表示にすることができます。

実際はboolean型の変数を指定して、表示非表示を切り替えるという事になると思います。

タブのナビゲーションを変更する

タブのナビゲーションはデフォルトはtabsです。もう一つタイプがあるようで、pillsと指定することでナビゲーションを変更することができます。

以下のようにデザインが変わります。

Angularにng-bootstrapをインストールする方法と使い方

NgbModalでモーダルウィンドウを開く

NgbModalをインポートして、モーダルウィンドウ(これもコンポーネント)を作成してみます。

呼び出す画面でボタンを作成し、そのボタンをクリックすればモーダルウィンドウが開くようにします。モーダルウィンドウもコンポーネントとして作成しておく必要があります。

ここでは

としておきます。

これで、app.component.tsにモーダルを呼び出すボタンを実装します。

No component factory found for Modal1Component. Did you add it to @NgModule.entryComponents?

こんなエラーがでました。モーダルとするコンポーネントは@NgModuleのentryComponentsに追加してあげないといけないようです。

参考サイト

ということで、app.module.jsを修正します。

これでng serve --oします。

Angularにng-bootstrapをインストールする方法と使い方

モーダルが表示されるようになりました。

呼び出し元からモーダルに値を渡す

モーダル画面を作成したら、パラメータのやり取りを行いたいですね。呼び出し元から値を渡したり、呼び出し元に値を戻したりといったことを実装してみます。

まずは呼び出し元画面からモーダル画面に値を渡す方法です。

  • 呼び出し元画面 → モーダル画面

呼び出し元画面から呼び出し先画面に値を渡すには@Inputを使用します。これはモーダルに限らず親コンポーネントから子コンポーネントにデータを渡すときには@Inputを使用します。

まず呼び出し元画面からパラメータを渡すために修正します。ここではaとbという名前でパラメータを2つ渡しています。

パラメータを受け取るためにモーダル画面のコンポーネント(ここではmodal1.component.ts)も修正する必要があります。

modal1.component.ts

これでng serve --oします。

Angularにng-bootstrapをインストールする方法と使い方

モーダル画面にパラメータが渡っていることが確認できました。

次にモーダル画面から呼び出し元画面にパラメータ(戻り値)を渡したいと思います。

  • モーダル画面 → 呼び出し元画面

モーダル画面のほうでNgbActiveModalをインポートし、closeメソッドがあるのでそのメソッドでモーダル画面を閉じます。closeメソッドの引数が戻り値になります。

modal1.component.ts

呼び出し元画面で戻り値を表示します。

resultがPromiseになるので、thenメソッドの引数が戻り値となります。

Angularにng-bootstrapをインストールする方法と使い方

戻り値が呼び出し元画面に表示されるのが確認できます。

モーダルのデザイン

モーダルのデザインがいけてないので、デザインをモーダルっぽくしてみます。

大きくヘッダとボディとフッタに分けることができます。modal-header,modal-body,modal-footerクラスが用意されています。

modal1.component.ts

以下のように表示されるようになります。

Angularにng-bootstrapをインストールする方法と使い方

とりあえずモーダルぽく?なりました。さらにヘッダ部はウィンドウぽく×ボタンでとじれるように×ボタンを表示してみます。

フッタ部はデフォルトで右寄せのようなので、OKやキャンセルボタンを配置するとモーダルぽくなるように思います。

modal1.component.ts

×ボタンではdismissメソッドを使用します。×ボタンは特殊文字でとりあえず表示しています。

Angularにng-bootstrapをインストールする方法と使い方

モーダルのクローズがどうやってクローズされたかを判断する

モーダルはdismisssメソッドでもcloseメソッドでも、モーダル以外の場所をクリックしても閉じられます。ついでにEscを押しても閉じられます。

ng-bootstrapでは、どの操作でとじられたかを判断することができます。

app.component.ts

result.thenの第二引数にアロー関数を指定します。また、ModalDismissReasonsをインポートします。

これでエスケープなのかcloseメソッドなのかdismissメソッドなのか背景をクリックしたのかがわかります。

以下実行例です。

Angularにng-bootstrapをインストールする方法と使い方

ツールチップを表示する

ng-bootstrapでツールチップを表示します。<div>タグや<button>タグにツールチップを指定することができます。上下左右の表示することができ、placement属性で指定します。

app.component.ts

これでng serveすると以下のように実行されます。

Angularにng-bootstrapをインストールする方法と使い方

参考サイト

参考サイト:Angularにngx-bootstrapをインストールする方法

株式会社CONFRAGE

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA