angular-splitを利用する最小サンプルコード

angular-splitの日本語記事がない！

angular-splitとは、ビューを分割し、ドラッグで分割領域を調節することができるUIライブラリです。（ほぼ公式文直訳）

便利で欠かせないライブラリなんですけど、日本語で解説してる記事がどうやらない。
Qiitaも個人ブログの記事も見つかりません。
それなら集合知を高めるためにも、私が記事を書こうかな～と思った次第です。
しかし私も触ったばかりなので、他の人がangular-splitを使用するハードルを下げるべくangular-splitを用いた最もシンプルなコードを書こうと思います。

まずはインストール

ng newでAngularの雛形を作成したら、

npm install angular-split

を実行。すぐ終わります。

そしてモジュール追加

app.module.ts

import { AngularSplitModule } from 'angular-split';

app.module.tsの先頭に↑を追加。

app.module.ts

AngularSplitModule.forRoot()

@NgModuleのimportsに↑を追加。

それからテンプレートを書く

app.component.html

<div class="split-example">
  <as-split [direction]="direction">
    <as-split-area #area1="asSplitArea">
      <p id="left">左</p>
    </as-split-area>
    <as-split-area #area2="asSplitArea">
      <p id="right">右</p>
    </as-split-area>
  </as-split>
</div>

次はコンポーネントを書く

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  direction: string = 'horizontal';

  constructor() {}
}

最期にスタイルシートだ

app.component.scss

.split-example {
    height: 100px;
    width: 200px;
}

# left {
    background-color: #cbffff;
}

# right {
    background-color: #ffffc7;
}

よし表示してみよう！

こんな感じになりますね。
中央の仕切りをドラッグして左右領域のサイズを変えることができますよ～。
angular-split様の御業です。

ただこれでは如何せんシンプルすぎない？という方は、
htmlに

<br />
<button class="btn btn-warning" (click)="direction = (direction === 'horizontal') ? 'vertical' : 'horizontal'">{{ '現在の分割: ' + direction + '' }}</button>

を追加し、

スタイルシートの.split-exampleに

outline: 5px dashed red;

を追加してみましょう。

枠ができてわかりやすくなりました。
ボタンを押すと分割方法が変わります。

やったね！

この超ゆとり記事を足掛かりに公式のサンプルで勉強してくれたらうれしいです。