Angular

Angular の electron application をそのまま build する

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

material icons を css でカスタマイズしてログインアイコン作る

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

Angular Material で Dark Mode への切替をつくる

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

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 でwebsocket を利用する(rxjs/webSocket)

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

Angular8 でelectron を利用する

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

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ごとにユニークかつ改ざん検知可能なトークンの払い出しを受けることができるサービスです。 …