Angular formArray 内の autocomplete を filter する

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

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

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

go でjson をパースする(構造体あり、なしパターン)

go でjson をパースする方法をまとめます。 構造体を使うパターンとbuger/jsonparserを利用して構造体を使わないパターンを書きます。

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)

hugo とswiper でcarousel を作成する

hugo とswiper でcarousel を作成する

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 を作成する

gorilla/websocket で異なるOrgin間の Error during WebSocket handshake: Unexpected response code: 403 を回避する

gorilla/websocket で異なるOrgin間の Error during WebSocket handshake: Unexpected response code: 403 を回避する

Angular formArray と仲良くなる

Angular formArray と仲良くなる

Hugo で異なる Sectionの Pageの一覧を取得する

Hugo で異なる Sectionの Pageの一覧を取得する

Angular でngFor をネストさせる

Angular でngFor をネストさせる

Angular でSentry を設定する

Angular でSentry を設定する

Angular でGoogle Analytics を設定する

Angular でGoogle Analytics を設定する

Hugo, bulam, rellax, animate.css を netlify + netlify cms でホスティングしたランディングページを作成する(実装編)

Hugo, bulam, rellax, animate.css を netlify + netlify cms でホスティングしたランディングページを作成する

go で暗号化:SHA2 でチェックサムの計算と検証

golang SHA2 でパスワードのハッシュ化と検証

go で暗号化:md5 でチェックサムの計算と検証

golang crypto/md5 でパスワードのハッシュ化と検証

go で暗号化:bcrypt でパスワードのハッシュ化と検証

golang.org/x/crypto/bcrypt でパスワードのハッシュ化と検証

Hugo, bulam, rellax, animate.css を netlify + netlify cms でホスティングしたランディングページを作成する(準備編)

Hugo, bulam, rellax, animate.css を netlify + netlify cms でホスティングしたランディングページを作成する

Angular Flex-Layout 入門

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

golang の struct と method

golang の struct と method

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 を利用する