[add]

檀家一覧に該当する檀家がない場合に表示

src/app/pages/danka-list/danka-list.html

 
       <div class="filter-row">
         <div class="filter-button-list">
-          <button type="button" class="filter-button" [class.active]="selectedFilter === 'all'" (click)="showAllDanka()">
+          <button type="button" class="filter-button" [class.active]="selectedFilter === 'all'"
+                  (click)="showAllDanka()">
             全件
           </button>
 
             法要あり
           </button>
 
-          <button type="button" class="filter-button" [class.active]="selectedFilter === 'phone'" (click)="filterPhoneAvailable()">
+          <button type="button" class="filter-button" [class.active]="selectedFilter === 'phone'"
+                  (click)="filterPhoneAvailable()">
             電話番号あり
           </button>
         </div>
             <div>家族</div>
           </div>
 
-            @for (danka of filterDankaList; track danka.id) {
-              <a class="danka-table-row" [routerLink]="['/danka-detail', danka.id]">
-                <div class="strong">{{ danka.householder }}</div>
-                <div>{{ danka.householdName }}</div>
-                <div>{{ danka.address }}</div>
-                <div>{{ danka.phones[0]?.tel }}</div>
-                <div>{{ danka.phones.length }}件</div>
-              </a>
-            }
-          </div>
+          @if (filterDankaList.length === 0) {
+            <div>該当する檀家はありません。</div>
+          }
 
+          @for (danka of filterDankaList; track danka.id) {
+            <a class="danka-table-row" [routerLink]="['/danka-detail', danka.id]">
+              <div class="strong">{{ danka.householder }}</div>
+              <div>{{ danka.householdName }}</div>
+              <div>{{ danka.address }}</div>
+              <div>{{ danka.phones[0]?.tel }}</div>
+              <div>{{ danka.phones.length }}件</div>
+            </a>
+          }
+        </div>
       </div>
     </section>
   </main>