Angular Projectsの3章を読んで不明点をまとめた

3: Building an Issue Tracking System Using Reactive Forms
3章を読んで写経して不明点をまとめた

◾️Angularの基本
・ファイル生成
ng generate service
ng generate interface

Serviceは独立したものということらしい
＞ Components shouldn’t fetch or save data directly, and they certainly shouldn’t knowingly present fake data. They should focus on presenting data and delegate data access to a service.
https://v17.angular.io/tutorial/tour-of-heroes/toh-pt4

・DI
service側にinjectableが自動的に書かれる

@Injectable({
  providedIn: 'root',
})

Components側で以下をするとDIされる

constructor(private issueService: IssuesService) { }

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

・3点リーダー
スプレッドされる
https://hacca8.com/note/20220409

◾️レイアウト
・クリックイベント
以下でtypescriptのメソッドを呼べる

(click)="hogehoge()"

https://angular.jp/guide/event-binding

・ngIf
divにif文をつっこめる
https://atmarkit.itmedia.co.jp/ait/articles/1711/27/news132.html

・ngSubmit
formとangularの紐付け
https://qiita.com/zaburo/items/4fa871a35c4ebdec5fec

・ngFor
divにforでループできる
https://atmarkit.itmedia.co.jp/ait/articles/1711/06/news127.html

・htmlのプロパティ
[]はpropertyを設定できる
https://qiita.com/mstssk/items/0a545382668e00a03314

<app-confirm-dialog *ngIf="selectedIssue" [issueNo]="selectedIssue.issueNo"
(confirm)="onConfirm($event)"></app-confirm-dialog>

・$event
コールバック側で設定できる
https://angular.jp/guide/event-binding-concepts

◾️エラー対応

・Can’t bind to ‘routerLink’ since it isn’t a known property of ‘a’.ngtsc(-998002)
以下で解決
https://stackoverflow.com/questions/42035387/cant-bind-to-routerlink-since-it-isnt-a-known-property

import { RouterModule } from '@angular/router';

・ERROR Error: NG05100: Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead.
https://stackoverflow.com/questions/39286667/browsermodule-has-already-been-loaded-error

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

・clr-modal is not known

import { ClarityModule } from '@clr/angular';

・can’t bind to formGruop
https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form

import { ReactiveFormsModule } from '@angular/forms';

・The *ngIf directive was used in the template, but neither the NgIf directive nor the CommonModule was imported
https://stackoverflow.com/questions/42063686/cant-bind-to-ngif-since-it-isnt-a-known-property-of-div-in-production-buil

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

・Error: NG05105: Unexpected synthetic listener @fadeDown.done found. Please make sure that: – Either BrowserAnimationsModule or NoopAnimationsModule are imported in your application.
https://zenn.dev/msk/scraps/32c086049989d5

import {provideAnimationsAsync} from "@angular/platform-browser/animations/async";

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimationsAsync()
  ]
};

Angular Projects

Pocket

関連記事: