Effective Angularの第5章のまとめ | N-BLOGΣ（゜Д゜）カッ!

5章：Creating Dynamic Angular Components
を読んだので調べたことをつらつらと書く

Angular一般
・keyof/typeof
typeは型,keyはkey-valueのkey
https://qiita.com/tak001/items/bec3ab7c1bb4df52a7e7

・パラメーターを渡す

<app-expense-modal [title]="'title'" [shown]=true>
    <h2>hogehoge</h2>
</app-expense-modal>

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-expense-modal',
    standalone: true,
    imports: [CommonModule],
    templateUrl: './expense-modal.component.html',
    styleUrl: './expense-modal.component.css',
})
export class ExpenseModalComponent {
    @Input({ required: true }) title = '';
    @Input({ required: true }) shown = true;
    @Output() shownChange = new EventEmitter<boolean>();
}

・ViewChildren
テンプレートの要素を取得する時に使う
https://tkzo.jp/blog/angular6-view-child-content-child/#ContentChild-2

ng-container/ng-template
・ng-containerに要素を出す
https://qiita.com/ukyo/items/0e44f5f562335fd6601b

<app-expense-modal [title]="'title'" [shown]=true>
    <h2 header-content>hogehoge</h2>
</app-expense-modal>

<!-- header-contentのディレクティブを表示する -->
<!-- h2タグがここに表示される -->
<ng-content select="[header-content]"></ng-content>

・ngTemplateOutlet
https://ryuzan03.hatenablog.com/entry/2020/04/10/184845
mobileならA->B->CD
!mobileならCD->B->A
になる

<ng-container *ngIf="isMobile" [ngTemplateOutlet]="A"></ng-container>
<ng-container *ngIf="!isMobile" [ngTemplateOutlet]="CD"></ng-container>
<div>block B</div>
<ng-container *ngIf="!isMobile" [ngTemplateOutlet]="A"></ng-container>
<ng-container *ngIf="isMobile" [ngTemplateOutlet]="CD"></ng-container>

<ng-template #A>
<div>A</div>
</ng-template>
<ng-template #CD>
<div>CD</div>
</ng-template>

・ngTemplateOutletContext
$implicitで、let-hogehogeにパラメーターを渡せる
https://ryuzan03.hatenablog.com/entry/2020/04/10/184845#implicit

<ng-container [ngTemplateOutlet]="optionTemplate || defaultTemplate" [ngTemplateOutletContext]="{ $implicit: option}"></ng-container>

<ng-template #defaultTemplate let-option>
    {{ labelKey ? option[labelKey] : option}}
</ng-template>

・ngComponentOutlet
コンポーネントを表示する
https://qiita.com/ksh-fthr/items/212fe3a1c0308b1fd782

<ng-container *ngComponentOutlet="currentTab"></ng-container>

・テンプレート変数

<p #exampleVar>expenses-overview-page works!</p>
<div>Template var says:{{exampleVar.innerHTML}}</div>

・if-else

<div *ngIf="expense">....</div>
<div *ngIf="!expense">Loading...</div>

<!-- elseのときはloadingがテンプレート変数となりng-templateが呼ばれる -->
<div *ngIf="expense else loading">...</div>
<ng-template #loading>
<div>loading...2</div>
</ng-template>

・DI
https://zenn.dev/lacolaco/books/angular-standalone-components/viewer/dependency-injection

export interface WeatherWidgetData {
    city: string;
    message: string;
}

export const WEATHERWIDGET = new InjectionToken<WeatherWidgetData>(
    'weatherwidgets'
);
//providerに以下を設定
{
    provide: WEATHERWIDGET,
    useValue: {
        city: 'Amsterdam',
        message: 'Sunny',
    },
}

//以下でデータを取得
constructor(@Inject(WEATHERWIDGET) a: WeatherWidgetData) {
    console.log(a);
}

・ng-contaienrにデータを渡す

widgetInputs = {
    city: 'Amsterdam',
    message: 'Sunny',
};

<ng-container *ngComponentOutlet="widget.component;inputs: widgetInputs;" ></ng-container>

Effective Angular

Pocket

関連記事: