こんにちは。 この記事ではAngular CDKの次期アップデートで提供される、 drag-and-drop 機能を紹介します。 執筆時点ではまだnpmパッケージとして公開されていないので、一般に利用できるまでにはもうしばらくかかりますが、 もし早く使いたい方は、次のコマンドで開発版ビルドをインストールしましょう。 なお、開発版ビルドですので自己責任でお願いします。 $ yarn add angular/cdk-builds CDK drag-and-drop drag-and-dropはその名のとおり、UI上でのドラッグアンドドロップ操作をサポートするものです。 @angular/cdk/drag-drop パッケージから提供される DragDropModule をインポートすると、次の2つのディレクティブ、コンポーネントが利用できます。 cdkDrag ディレクティブ cdkDragデ
Angular2+ SPA に JavaScript 実装の QR コード読み取り機能を搭載するにあたり、既存の JavaScript ライブラリを選定した結果発表JavaScriptTypeScriptQRcode 現在開発中の Angular2+ SPA プロジェクト ( モジュールバンドラーは webpack を採用 ) に、デバイスのカメラを使って QR コードを読み取る機能を搭載することとなりました。 そこで、QR コードを検出・読み取りする JavaScript 実装のライブラリを選定することとしました。 結論: jsQR https://www.npmjs.com/package/jsqr ( GitHub ) Apache-2.0 イメージを渡すと、そのイメージ内の QR コードを検出・読み取って返すのみに特化されているライブラリです。 カメラや video 要素の制御につ
僕が監修した 「Angularデベロッパーズガイド」が12/15に発売となります! Angularデベロッパーズガイド 高速にかつ堅牢に動作するフロントエンドフレームワーク 作者: 金井健一,吉田徹生,林優一,宇野陽太,奥野賢太郎,稲富駿出版社/メーカー: インプレス発売日: 2017/12/15メディア: 単行本(ソフトカバー)この商品を含むブログを見る 上のリンクはアフィリエイトではないので何万回踏まれても僕に利益はないですが、買ってくれたら印税が回ってくるので気になったら買ってください! 監修 まだ発売前ですがこの本の監修をする上で気をつけたことを軽くまとめておこうと思います。 今回監修としてやったことは、個々の原稿のレビューと、全体の内容の設計のレビューです。 監修は初めてだったので最初は何をするんだろうという感じでしたが、ただただひたすらレビューをしました。 本のレビューするとき
りんごです。 この記事はAngular Advent Calendar 2017の12月15日の記事です。 はじめに よくあるWebの入力フォームのある画面や何かしらのデータを編集するWebアプリの画面など、不意に誤ってブラウザのタブを閉じてしまうと悲しい思いをするケースがあります。 そういった画面を実装するには、次のようにwindowのbeforeunloadイベントを使うことで離脱確認ダイアログを表示するのが一般的です。 // beforeunloadイベントのreturnValueにtrueを設定し離脱確認ダイアログを表示する window.addEventListener('beforeunload', function(event) { event.returnValue = true; }); しかし、AngularではwindowのイベントだけでなくRouterによって画面遷
これは Angular Advent Calendar 2017 4日目の記事です。 こんにちは (。・ω・。) Angular で CGM サービスを運用・構築したり、ng-japan の slack で emoji を追加することを生業としている者です。 今回は、担当しているサービスで Virtual Scroll を導入する機会があったので、その経緯と方法について紹介したいと思います。 今回の動作 demo は コチラ * この demo は、いずれ落とすことになると思いますのでご了承くださいm(__)m ↓ 動いている様子 demo 用に 100 件のデータを投入しましたが、どんなにデータを読み込んでもページ間の遷移速度が落ちない様子がわかると思います。 なぜ Virtual Scroll が必要だったのか サービス内で使われるリストは、新着一覧やランキング等様々なページの要となる
Learn how to style like a pro using Shadow DOM selectors, Light DOM, @HostBinding, ElementRef, Renderer, Sanitizer and much more Geometric Shapes by SasjIn this guide we want to cover the different options available when styling Angular Components and Directives. We will cover: Angular Encapsulation Modes: emulated, native and disabled.Browser support, Shadow DOM vs Light DOM.@Component styling me
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く