Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

「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を確認すると...
次のようにツールバーが表示されます。

スクリーンショット 2017-10-07 18.37.39.png

所感

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

以上です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away