[Angular入門] jQueryではなく⚔️kendo-UI⚔️で要素を入れ替える!

 kendoとの出会い 

茶番が嫌いな方は次リンクで本編へどうぞ kendo-angular-ui紹介

要素を自由自在に入れかえたい!

どうやればいいだろう?

どうやらjQueryを入れればいいらしい・・・

bootstrapみたいにインストールするのか。よし

npm install jquery –save いけぇぇぇぇぇぇーーーーーーー

import * as $ from ‘jquery’;で読み込めるっぽい

エラー

なんで?

よしじゃあ、次はインデックスに入れてみよう!

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/〇〇/jquery.min.js”></script>

こんどはいくっしょ

エラー

は?

どうやらjqueryにはこうやれ的なお手本がなく、みんな苦労して無理やり入れているみたいだ😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖😖

初心者にはどうしようもできないやつだぁぁぁぁ

これまで、人が「こうすればいいよ」という情報を元にやっていたので、情報が無いなら諦めるしか無いのか・・・・・・・・・・・

【jQueryUIを使わずにドラッグ&ドロップを実装したい】Javascriptライブラリ「Sortable」を使ってみた – Qiita

そ、そんなことができるのか

「デモページ」がある見てみよ

Sortable. No jQuery.

Благодарю вас!

下にスクロールしてみる・・・・・・

そこにはAngularの文字が!!!!!

Angularへの導入方法がありそうだ😍😍

でもJSのみ対応の可能性も・・・

The Angular2 version of this Library is coming soon..
😱😱😱

まだだ、絶対にあるはずだ。

Angular5はアップデートばっかりで不安定だから最新のやつの対応が少ないけど、

これまでなんやかんややってきたじゃないか。。。。。

🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕚🕛🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕚🕛🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕛🕚🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕚🕛

ng-sortable angular2で検索してみよ

ん?

Kendo UI for Angular – Telerik

kendo?なんやそれ

Sortable Overview – Components – Kendo UI for Angular

うぉぉおおおおおおおおおおおおおおおおおおおおぉぉ

CODE SAMPLEをコピペしてデモページ作ったぞ。htmlとcssの書き方が独特で、まんまコピペはできなかったけど。それ以外は何も苦労なくエラーもなし。すんなり。有能剣道

DEMO

すごいぞ⚔剣道⚔

他にもいろいろできるようなライブラリがあるみたいだ。

でもなんで剣道?日本人がやってんのかな?

Worldwide Offices – Progress

結構、オフィス構えたでかいとこみたいだ。なら日本もあるだろう・・・

?_?

なぜ剣道なのか?そんな疑問を抱えながら剣道にお世話になるのだろう・・・

以上、kendoとの出会いでした。御粗末

kendo-angular-ui

茶番回避組のための剣道紹介

剣道公式、要素入れ替え紹介ページ

Sortable Overview – Components – Kendo UI for Angular

紹介をもとに作ったデモページ

DEMO

初心者でも実装できる剣道様ありがとう。

インストール

次のコマンドを入力します。

npm install –save @progress/kendo-angular-sortable @progress/kendo-angular-l10n @angular/animations

完了したら、app-moduleに次のコード加えます。

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { SortableModule } from ‘@progress/kendo-angular-sortable’;

さらに、@NgModule.importsに加えれば使えるようになります。

では、コードの中身を見ていきましょう。

コード解説

シンプルなタイルを入れ替えるやつを見ていきます。

固定化は一旦置いておいて、どうして動くのか?配列もどうして変わるのかをまず見ます。

Sortable

まず、コンポーネントプロパティの見慣れないコードから見ていきます。

encapsulation

カプセル化というコンポーネントプロパティの一つのようです。

Angular – Component Styles(以下リンク先和訳)

コンポーネントのCSSスタイルはコンポーネントの毎にカプセル化され、他のアプリケーションには影響しません。

encapsulationプロパティを指定することでカプセル化をコンポーネント毎にどのように行われるかを制御することができます。各モードについて説明します。

encapsulation: ViewEncapsulation.Native

和訳不能😰

encapsulation: ViewEncapsulation.Emulated

和訳不能😰

encapsulation: ViewEncapsulation.None

Noneは、Angularがコンポーネント内でカプセル化しないことを意味します。 AngularはCSSをグローバルスタイルに追加します。つまり、コンポーネントのスタイルをHTMLに貼り付けるのと本質的に同じことになります。

<kendo-sortable>にはグローバルスタイルを

入れかえ要素の生成は次のタグを使います。

<kendo-sortable>

これを使ってしまうと、クラススタイルをカプセル化できなくなるようです。

例えば、カプセル化したクラススタイルは次のようになります。

.item[_ngcontent-c1]

しかし、<kendo-sortable>を使うと、コンポーネント別のクラスとしてタグを生成できないようです。

シンプルに.itemと生成されます。

ng-bootstrapを使ったときにも同じようなことがありましたが、おそらくカプセル化は難しいのでしょう。

つまり、CSSスタイルはカプセル化せずにグローバルスタイルとして定義しないとCSSが適応されないことになります。

そのため、<kendo-sortable>タグ内のクラスのCSS指定はグローバルスタイルにする必要があります。

だから、encapsulationはnoneにする必要があります。

カプセル化を無効にすればそのコンポーネントCSSがグローバルスタイルになります。

配列作成

次のコードで入れ替えをする配列を用意します。

文字配列定義をして、空配列とします。

public items: string[] = [];

パブリック指定しなくても良い気がします。

items配列

コンストラクタ内で、items配列に文字列を格納します。

for文を使って、指定のアイテム分の文字列を格納します。

今回は20個のアイテムを作りました。

constructor() {
for (let i = 0; i < 20; i++) {this.items[i] = ‘Item ‘ + i}
}

TSファイルのコードはこのように簡単な配列作成だけになります。

次にHTMLを見ていきます。

kendo-sortableプロパティ

<kendo-sortable></kendo-sortable>内に入れ替え可能要素を生成します。

そのために、kendo-sortableプロパティを設定します。

SortableComponent – Sortable API – Kendo UI for Angular

シェアする

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

フォローする