angular

環境 Angular: 15 interactjs: 1.10.27 interactjsとは？ https://github.com/taye/interact.js JavaScriptでドラッグ＆ドロップ、リサイズ、マルチタッチジェスチャー（慣性とスナッピング機能付き）を実装できるライブラリ。 色々なデモ インストール npm install interactjs npm install --save-dev @interactjs/types でインストール。 実装 template <div class="draggable">Draggable Element</div> まずテンプレート側でdivを作成する。 component 次に、 @ViewChild('canvasEl') canvasEl: ElementRef | undefined; コンポーネント側でcanvasを取得し、 ngAfterViewInit() { const position = { x: 0, y: 0 } interact('.draggable').draggable({ listeners: { start (event) { console.log(event.type, event.target) }, move (event) { position.x += event.dx position.y += event.dy event.target.style.transform = `translate(${position.x}px, ${position.y}px)` }, } }) } interactを呼び出す。...

環境 Angular: 15 Fabric.js: 5.3.0 Fabric.jsとは？ http://fabricjs.com/ Canvas内に画像やテキストを配置したりすることのできるライブラリ。 配置した要素の「移動」、「リサイズ」、「回転」など非常に自由度高く操作することができる。 お絵描きアプリとかを作ることができる。 色々なデモ インストール $ npm i fabric betaでバージョン6が公開されており、5から6で破壊的な変更があるっぽい。 つまり5を入れておくと、いずれ大規模な修正が必要になる可能性がある。 けど、解説とかは5の方が多いし、6がまだbetaということで5を入れることにした。 🧐 Breaking changes for fabric 6.0 次に定義ファイルも必要になったので"npm i @types/fabric": "^5.3.7",でインストールした。 実装 template <canvas width="300" height="300" #canvasEl> </canvas> まずテンプレート側でcanvas>を作成する。 component 次に、 @ViewChild('canvasEl') canvasEl: ElementRef | undefined; コンポーネント側でcanvasを取得し、 ngAfterViewInit() { if(this.canvasEl) { const canvas = new fabric.Canvas(this.canvasEl.nativeElement); const rect = new fabric.Rect({ top: 100, left: 100, width: 60, height: 70, fill: 'red', }); canvas....

環境 node => v16.13.2 angular => 15.0.4 AngularでリクエストヘッダーにAuthorizationを共通して持たせたい とかレスポンスのStatusCodeを見て共通処理を書くと言ったAPIリクエスト前後の処理をどこで実装するのがいいのか調べてみた。 HttpInterceptor どうやらドンピシャっぽいのがこれで、ドキュメントによると Intercepts and handles an HttpRequest or HttpResponse. つまり、リクエストとレスポンスそれぞれに処理をできますよということ。まさに探していた機能に間違いない。 使ってみる リクエストに対して処理をする import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, } from "@angular/common/http"; import { Injectable } from "@angular/core"; import { Observable } from "rxjs"; @Injectable() export class AuthInterceptor implements HttpInterceptor { constructor() {} intercept( req: HttpRequest<any>, next: HttpHandler, ): Observable<HttpEvent<any>> { const newReq = req.clone({ headers: req.headers.set("Authorization", "Bearer " + "token"), }); // cloneされてヘッダーを付与したリクエストを次の処理に引き渡す return next....

Objectを返すPipe template側で展開するとこんな感じのやつ。 value | customPipe |json {hoge:'hoge', fugo:'fugo', piyo.'piyo'} 参照方法は簡単 (value | customPipe).hoge // hoge で参照できる、ただこれだけ。

コンポーネントを再レンダリングさせたい 色々な状況が複雑に絡み合っていた。ある処理を行ったあと、初期表示に戻したいという要件があり、それじゃあということで、表示用にデータを作り直したりと色々手を尽くしたが、前述したように色々な状況が複雑に絡み合っていせいで、どうにもできなかった。 そこで、いっそコンポーネントをまるっと再レンダリングしちゃえ、ということにした。 で、それを実現するのが下記コード。 constructor(private router: Router) {} ~ this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => { this.router.navigate(['Your actualComponent']); }); 行われていることは、１度RefreshComponentというページに飛び、Your actualComponentに戻ってくるという処理。ただユーザーはそれに気が付かない。つまりハック的な対処方法なので、使うのは自己責任で。