はじめに Angular の electron application をそのまま build する方法をまとめます。 Angular の electron アプリは maximegris/angular-electron のようなボイラープレートをベースに開発する記事が多いですが、今回は利用せず electron-userland/electron…

はじめに material icons を css でカスタマイズしてよく見るログインアイコンを作る流れをまとめます。 早い話このアイコンです。 material icons を css でカスタマイズする流れ まずはパクり参考にしたいiconのカラーコードを取得したいところです。 私は…

はじめに Angular Material で Dark Mode への切替を作ります。 dark mode Angular Material Angular Material の mat-light-theme と mat-dark-theme という予め準備されているものを利用します。 .light-theme という class がつけばライトモードで .dark-…

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

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

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

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

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

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

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

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

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

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

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

Angular でwebsocket を利用する（rxjs/webSocket）

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

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

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

Angular formArray と仲良くなる

Angular でngFor をネストさせる

Angular でSentry を設定する

Angular でGoogle Analytics を設定する

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

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

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

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

Angular でChart.js を利用する

AngularのHttpClientのエラー制御

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