Angular Projectsの6章と7章前半を読んで不明点をまとめた

Angular Projects

6. Building a Mobile Photo Geotagging Application Using Capacitor and 3D Maps
7. Building an SSR Application for GitHub Portfolio Using Angular
6章と7章前半までを読んで写経して不明点をまとめた

Angular
・httpリクエスト

return this.http.get<User>(${this.apiUrl}/users/${this.username})

・@Input
コンポーネント間の引き渡しに使う
https://qiita.com/masaks/items/677195b78379e0877e24

・ng-content
コンポーネントにタグを入れ流時に使う
https://qiita.com/ukyo/items/0e44f5f562335fd6601b

・データバインディング
https://angular.jp/guide/binding-syntax

// data->viewは[]
<input [disabled]="condition ? true : false">
// eventは()でbindingする
<button type="button" (click)="onSave()">Save</button>
// event+data->viewの2way
<input [(ngModel)]="name">

HTML/css
・rel=noopener
＞ターゲットリソースへ移動する際、開いた元の文書へのアクセスを新しい閲覧コンテキストに許可しないことをブラウザーに指示します。
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/rel/

・iタグ
＞フォント（文字）をイタリック体にするためのタグ
https://html-coding.co.jp/annex/dictionary/html/i/

・bootstrap
設定方法が違う

// @import "bootstrap/scss/bootstrap";
// @import "bootstrap-icons/font/bootstrap-icons";
@import "bootstrap";
@import "bootstrap-icons";

エラー
・Ioniconsのアイコンがでない
Angular17だとアイコンが出ない。
importしてaddIconsを叩く必要がある
https://stackoverflow.com/questions/77878703/issue-with-ionicons-not-displaying-in-ionic-angular-standalone-components

import { chevronBack } from 'ionicons/icons'
import { addIcons } from 'ionicons'

constructor() {
    addIcons({ chevronBack })
}

・Error: NG0302: The pipe ‘async’ could not be found in the
CommonModuleを入れる
https://stackoverflow.com/questions/39625321/the-pipe-async-could-not-be-found

import { CommonModule } from '@angular/common';

Angular Projects

Pocket

関連記事: