Angular

Angular と SVG で Grid 上に Drag 可能な図形を動的に生成する

はじめに 先日、技術書典マーケットにて「入門GUI ーWebブラウザで作る本格インタラクションー」なる本を書い Angular と SVG で何かしたいなぁと思う最近です。 前回の Angular と SVG で Zoom / Drag ができる Grid を作るの続きとして Angular と SVG で …

Angular 9 で PWA を作る

はじめに iOS 13.4 の safari から getUserMedia() でカメラデバイスの操作が可能になったという Tweet があったので、せっかくなので Angular9 の Progressive Web Apps (PWA) で検証しました。 {{< githubcard repo="nao50/angular9-pwa" >}} Angular 9 で…

Angular と SVG で Zoom / Drag ができる Grid を作る

はじめに 先日、技術書典マーケットにて「入門GUI ーWebブラウザで作る本格インタラクションー」なる本を書いました。 React と SVG でバウンデイングボックスを作る章があり、SVG を使ったとこもない私も楽しむことのできる内容でした。 今回はせっかく学ん…

Angular を AWS Amplify にホスティングする

AWS Amplify に入門してみます。 まずは Angular で作ったサイトを Amplify にホスティングする方法をまとめます。

Angular で jsQR を使ってQRCodeを読み取る

Angular で jsQR を使ってQRCodeを読み取る方法をまとめます。 この記事は Angular 2019アドベントカレンダーの記事です。

Angular formArray にデータが追加される度に Angular material の dataTable にデータを追加する

Angular formArray にデータが追加される度に Angular material の dataTable にデータを追加する方法をまとめます。 サンプルアプリケーションのソースコードを Github で公開しています。

Angular 8 の Angular Elements で単一の jsファイルとしてbuildする方法

Angular Elements で単一の js ファイルとして build する方法とそれを読み込む方法をまとめます。

Angular formArray 内の重複した key をまとめる

Angular formArray 内の重複した key を集計して個数カウントおよびエラー制御を行う

Angular formArray 内の autocomplete を filter する

可変長の Angular formArray 内で autocomplete の要素を filter する方法をまとめます。 formArray が可変長の場合 filter を当てる autocomplete 要素の位置を特定する必要があるので少し工夫が必要です。

Angular Elements でWeb Components化した Dialog をHugo に埋め込む

Hugo のような静的なコンテンツを扱うフレームワークを利用している際に部分的に動的なガジェットが欲しくなることがあります。 Angular Elements で作ったアプリケーションを Hugo に埋め込む方法をまとめます。

Angular でfetch したURL をswiper で利用する

以前、angular でlocalにある画像をslide として表示する方法をこちらの記事でまとめました。 画像のURL をfetch する際に多少の遅延が生じることになりますが、その遅延に起因してslide の切替わり時に一部の画像が表示されません。

Angular でswiper を使う

Angular からswiper を使う方法をまとめています。 stackblitz で動くexample を掲載しています。

Angular とleaflet-ant-path で進行方向を可視化する

Angular とleaflet-ant-path で進行方向を可視化する

Angular でwebsocket を利用する(rxjs/webSocket)

Angular でwebsocket を利用する(rxjs/webSocket)

Angular8 でelectron を利用する

はじめに Angular8 でelectron を利用する方法をまとめます。 Angular6/7 と同じように main.js つくったら画面が真っ白だぜ。という方向けの記事です。 angular8 electron

Angular と leaflet (OpenStreet Map) で Geo Tracker を作る

Angular と leaflet (OpenStreet Map) で Geo Tracker を作る

Angular でleaflet (OpenStreet Map) を使う

Angular でleaflet (OpenStreet Map) を使う

Typescript とrxjs でマイナス100から100までのランダムな数字を1秒ごとに生成する

Typescript とrxjs でマイナス100から100までのランダムな数字を1秒ごとに生成する

Typescript とmoment.js で 毎秒更新されるClock を作成する

Typescript とmoment.js で 毎秒更新されるClock を作成する

Angular formArray と仲良くなる

Angular formArray と仲良くなる

Angular でngFor をネストさせる

Angular でngFor をネストさせる

Angular でSentry を設定する

Angular でSentry を設定する

Angular でGoogle Analytics を設定する

Angular でGoogle Analytics を設定する

Angular Flex-Layout 入門

Angular Flex-Layout の入門記事です。 stackblitz のサンプルで解説しています。

Angular FormArray内のFormGroupでCross-field validationを行い任意のinput要素にエラーを返す

Angular FormArray内のFormGroupでCross-field validationを行い任意のinput要素にエラーを返す

Angularで1:Nのコンポーネント間でデータ連携を行う

Angularで1:Nのコンポーネント間でデータ連携を行う

moment.jsで今月の月初から月末までの配列を作る

はじめに Chartを扱う際に、任意の時間間隔かつ時間範囲での配列が欲しくなる時があります。 Angularでは Date や import { DatePipe } from '@angular/common'; を使うことが一般的かと思いますが Chart.jsではmoment.jsを利用しているようなのでそちらでも…

Angular でChart.js を使う

Angular でChart.js を利用する

AngularのHttpClientのエラー制御を理解する

AngularのHttpClientのエラー制御

SORACOM Endorseの認証の仕組みを理解する

はじめに SORACOM Endorseを利用してSIMの認証を外部サーバーの認証と連携するでもアプリケーションを作成し、各ノードの役割についてまとめます。 Endorseは SIMごとにユニークかつ改ざん検知可能なトークンの払い出しを受けることができるサービスです。 …