この記事は Angular #2 Advent Calendar 2019 7日目の記事です ng g libraryで作成したAngularのライブラリに対してjestでテストを回せるようにしたのでやったことを書いていく 経緯 「テキストボックスの入力に関して指定秒数入力がなかった場合にイベント…

allure-framework/allure2: Allure Framework is a flexible lightweight multi-language test reporting tool. It provides clear graphical reports and allows everyone involved in the development process extract maximum of information from everyd…

前から気になっていたng generate libraryを使ってライブラリを作ってnpmに公開するところまでやってみる 以前は下記記事でやったようにng-packagrを使って色々設定して公開までこぎつけた 自作コンポーネントをnpmに公開する - notebook swfz.hatenablog.co…

今回はGoogleAnalyticsのコードをAngularのプロジェクトに埋め込む話 SPAなので単に計測コードを貼り付けただけでは計測できないのでよしなにする必要がある ライブラリも探せばあったがあまり頻繁に更新されてなかったりとちょっと不安要素があったので今回…

仕事で見ていいなと思ったので自分でもやってみる 方法は色々ありそうなのでとりあえずメモとして残しておく CIでlintやprettierなどをチェックしてコーディングスタイルなどを保っていたが CIでprettierチェックするとpushした結果prettier掛け忘れてた場合…

angular-cli@8.3.0からdeployコマンドが使えるようになったみたいなので早速使ってみたいと思います ng deploy angular cliのコマンドserveやgenerateなどに加えてdeployというコマンドが使えるようになりました プロジェクトにng addでライブラリを追加する…

ちょうどTypeScriptでstrict: trueやっていこう！という時期だったところに「AngularってTemplateTypeCheckできないんですね」 ということを言われて調べてみたところできなそうだったので落胆していたのですがIvyで実現されていたようです ng --version _ _…

かれこれ結構な年月かかわらせて頂いているので実装するにあたってのこれはーみたいなのが溜まってきたのでここいらで吐き出しておきます 簡単にできる割に体験が良いもの、軽い気持ちでやったら後々苦労するものなど tooltip 設定されたカラムでカーソルを…

ag-Gridのバージョンアップ作業でchangelogを眺めていたらいくつか気になったものがあったので試してみます 今までだとカスタムコンポーネントでフィルターをフルカスタムすることもできますがちょっと条件変えたいといった場合にまでコンポーネントを用意し…

今回はCypressをAngularのプロジェクトに入れて実際にテストを書いてみます 実際にブラウザを起動して操作するところが見れたりみたいな部分は他の記事でも紹介されているので今回は割愛して主にpluginを入れてテストしてみる話をしたいと思います Cypress J…

GW前からちょこちょこ触りだしていたE2EのテストフレームワークCypress Angularのサンプルプロジェクトに入れて少しづつ試していたのですがCircleCIでテスト回すようにしてみたらなんと日本語表示ができない状態でした 少し調べてみたところnotofontを入れる…

chart.jsをつかってグラフを書いていたのですがある日こんな要件が飛んできました 「凡例をクリックすると表示非表示できるけどラベルをクリックしても表示非表示切り替えたい」 ！！！！！ ！！！！！ ヒストグラムだと何言ってんだ？って感じの話ですがカ…

Rails5 + Angular6で開発していてwebpackerを使わずにCapistranoを使ってAngularのビルドコマンドを直に実行していました .....が、待てどくらせどAngularのビルドが終わらない！ 大体10分くらい待たされているよう これではデプロイどころではないので調べ…

今回もag-Gridについて 任意のデータをコールバックで使いたいときに使える小ネタです gridの一覧にデータを表示したときのデータを保持しておいてその値が変わったらスタイルを適用したいといった場合 環境 ag-grid:18.1.2 angular: 6.1.4 要件としては 数…

業務で凝ったグリッドを作っていくと大体言われるのが「CSVで落としたい」ですよね 結局CSVか！なんて思ったりもするのですがあったらあったでやはり便利なものです 今回はag-gridでCSVダウンロード機能に関して 公式ドキュメント CSV Export: Core Feature …

以前カスタム構造ディレクティブを作ってハッシュの各要素をngForのように回すという方法をとったことがありました [angular] ディレクティブについて - カスタム構造ディレクティブを作ってみる - notebook swfz.hatenablog.com いつの間にか公式でkeyValue…

Angular7がリリースされてCDKにDragAndDropが入ってきました ということで簡単なTODOアプリを作ってみます 内容的にはもはや何番煎じだって感じですが実際に自分で触ってみたほうがいいなと思ったので残しておきます 動作環境 $ npx ng --version _ _ ____ _…

ag-gridの公式ドキュメントにサンプルはあるもののその場で作って設定するみたいな感じになっていたのでangularで再利用できるようにコンポーネント化してみます 公式ドキュメント Cell Editing: A Core Feature of our Datagrid www.ag-grid.com 今回使うmo…

Angularでバックエンドが必要な開発をしていて、最初モックサーバなどを立てて先にフロント側に着手したいといった場合 普通にポートを別で指定してリクエストを送るとCORSで怒られます そこでng serveのproxyオプションを使用してバックエンド側にプロキシ…

chrome67からデスクトップPWAが使えるようになったのでいくつかのPWAをインストールしてみたのですが良さそうな感じがしました デスクトップPWAを使ってみた – Takeshi Amano – Medium chromeとは別ウィンドウで起動できるのとelectronでやらなくても良くな…

angular6以前はただただnghコマンド叩くだけでリポジトリのページでも問題なく表示できたのですがangular6になってマルチプロジェクトに対応したからか分からないけど成果物のパスが変わったっぽい 以前はdist以下に各種ファイルが生成されていた angular6以…

rxjs使おうとすると毎度ドキュメント見ながら使えそうなオペレータ調べてやるのがつらいですね 後の自分用のメモにサンプル実装を残します 今回は「検索ボックスなどの入力で必要な部分だけ取り出す」です 実行環境 angular: 5.1.2 rxjs: 5.5.6 やりたいこと…

よくあるリンクがアクティブかそうじゃないかみたいなのを判断してスタイルを変える機能に関しての備忘録 AngularだとrouterLinkActiveというものがあります 動作環境: Angular5.1 html <a [routerLink]="['/hoge', 'fuga', 'piyo']" routerLinkActive="is-active"> scss a.is-ctive { background-color: #CCC; } これでメニュー中の自</a>…

前回のrow gorupingに続き今回はpivot 動作環境 Angular: 5.1.3 ag-grid: 16.0.0 pivot テーブル定義に追加する

row groupingを実際にやってみた時のオプションなどのメモ 実際に使ったオプションなどの覚書なので結構雑になってます 全部みたいなら下記にサンプルコード付きで丁寧に乗っているのでこちらをみた方が良さそう Grouping by Row: Core Feature of our Datag…

今回は構造ディレクティブについて angularではディレクティブというと構造ディレクティブと属性ディレクティブの二つがあります 属性ディレクティブに関してはカスタムディレクティブ作ったりしやすいかなと個人的には思っていて割と理解しやすいかなと思い…

クエリパラメータをうけとって初期データなどを取得してからレンダリングしたいみたいなパターンの時、もしくは初期データをあらかじめ用意しておきたい場合など コンポーネントのonInitに書いていくと複雑になればなるほどコードが膨れ上がっていってしまい…

rxjs難しいですね 時間軸を変えたりキャッシュをしたり定期的に何かしたりなど。。。結構な数のオペレータがあるので組み合わせ次第で色々できるでしょう 今回は管理画面上のレポート(csvなど)をダウンロードするときの処理をrxjsでスマート()にしてみたいと…

やったこと、躓いたこと 環境 angular 4.4.5 -> 5.1.3 node v7.9.0 Update Guideを元に事前にできるものは修正しておく Angular Update Guide - Beta https://angular-update-guide.firebaseapp.com/angular-update-guide.firebaseapp.com packageをインスト…

angularのhttpクライアントは5系から@angular/httpではなく@angular/common/httpが推奨されています 既存のシステムが4系だったのでバージョンアップにあたり調査をしていたのですが少し詰まったところがあったのでメモを残しておきます HttpClient 基本的に…