angular-cliで作成したプロジェクトにelement-angularを適用する

7517 ワード
angular-cli element Angular element テキストリンク

「AngularでもElement UIを使いたい」というそんなあなたに。
Vue.js界隈では人気らしいUIコンポーネントライブラリのAngular実装があるようなので、angular-cliと合わせて使ってみます。

eleme/element-angular

前提

この記事の内容を試した際のangular-cliのバージョンは、次の通りです。

$ ng version
@angular/cli: 1.4.1
node: 8.1.3
os: darwin x64

element-angularはまだまだBeta版らしいです。

package.json
"element-angular": "0.0.4-beta.3"

準備

ベースのプロジェクトを作成

まずは、angular-cliでベースとなるプロジェクトを作成します。

$ ng new element-angular-handson

element-angularをインストール

公式の Getting Started 通りにインストールしていきます。

本体のインストール

$ npm i --save element-angular

app.module.tsでElModuleをインポート

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ElModule } from 'element-angular'; // 追加

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ElModule.forRoot() // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

style.cssでelement UIのCSSをインポート

style.css
@import "~element-theme-default";

実際に試してみる

ここまでの手順で一通りのelement UIのコンポーネントが使えるようになっています。

app.component.html
<el-menu class="el-menu-demo" mode="horizontal">
  <el-menu-item index="1">Toolbar</el-menu-item>
  <el-submenu index="2" title="menu">
    <el-menu-item index="2-1">item1</el-menu-item>
    <el-menu-item index="2-2">item2</el-menu-item>
    <el-menu-item index="2-3">item3</el-menu-item>
  </el-submenu>
  <el-submenu index="3" title="menu2">
    <el-menu-item index="3-1">item1</el-menu-item>
    <el-menu-item index="3-2">item2</el-menu-item>
    <el-menu-item index="3-3">item3</el-menu-item>
  </el-submenu>
  <el-menu-item index="4"><a href="https://github.com/eleme/element-angular" target="_blank">Link</a></el-menu-item>
</el-menu>

<h1>てすと</h1>
<el-button>Button</el-button>

npm startで開発サーバーを起動しhttp://localhost:4200を確認すると...
次のようにツールバーが表示されます。

所感

まだBeta版ということもあり、多言語対応やロケール設定などに対応していないようです。
試しにDatePickerを使ってみましたが、曜日表記が中国表記固定になのでつらみを感じました。
ロケールを気にせず使える部分は、Vue.js版のElement UIと遜色なく使える印象です。

以上です。