update control flow template and update their favicons with new angular icon

npm/ng-packs/apps/dev-app/src/app/home/home.component.html

@@ -10,17 +10,18 @@
 
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
 
-    <abp-button
+    @if (!hasLoggedIn) {
-      *ngIf="!hasLoggedIn"
+      <abp-button
-      [loading]="loading"
+        [loading]="loading"
-      (click)="login()"
+        (click)="login()"
-      [disabled]="loading"
+        [disabled]="loading"
-      class="px-4 ml-1"
+        class="px-4 ml-1"
-      role="button"
+        role="button"
-      iconClass="fa fa-sign-in"
+        iconClass="fa fa-sign-in"
-    >
+      >
-      {{ 'AbpAccount::Login' | abpLocalization }}
+        {{ 'AbpAccount::Login' | abpLocalization }}
-    </abp-button>
+      </abp-button>
+    }
   </div>
   <div class="my-3 text-center">
     <h3>Let's improve your application!</h3>
@@ -299,17 +300,14 @@
         {{ context.title }}
       </h5>
       <p [innerHTML]="context.description"></p>
-      <ng-container
+      @if (context.customTemplate) {
-        *ngIf="context.customTemplate"
+        <ng-container [ngTemplateOutlet]="context.customTemplate"></ng-container>
-        [ngTemplateOutlet]="context.customTemplate"
+      }
-      ></ng-container>
+      @for (link of context.links; track $index) {
-      <a
+        <a [href]="link.href" target="_blank" class="btn btn-link px-1"
-        *ngFor="let link of context.links"
+          >{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i
-        [href]="link.href"
+        ></a>
-        target="_blank"
+      }
-        class="btn btn-link px-1"
-        >{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i
-      ></a>
     </div>
   </div>
 </ng-template>

templates/app-nolayers/angular/src/app/home/home.component.html

@@ -7,9 +7,10 @@
     </div>
     <div class="card-body">
       @if(!hasLoggedIn){
-        <button class="btn btn-primary mb-2" (click)="login()">{{ 'AbpUi::Login' | abpLocalization }}</button>
+        <button class="btn btn-primary mb-2" (click)="login()">
+          {{ 'AbpUi::Login' | abpLocalization }}
+        </button>
       }
-      
       <p>{{ '::Welcome_Text' | abpLocalization }}</p>
     </div>
   </div>

templates/app/angular/src/app/home/home.component.html

@@ -2,39 +2,51 @@
   <div class="p-5 text-center">
     <div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert">
       <h5 class="m-1">
-        <i class="fas fa-rocket" aria-hidden="true"></i> Congratulations, <strong>MyProjectName</strong> is
+        <i class="fas fa-rocket" aria-hidden="true"></i> Congratulations,
-        successfully running!
+        <strong>MyProjectName</strong> is successfully running!
       </h5>
     </div>
     <h1>{{ '::Welcome' | abpLocalization }}</h1>
 
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
 
-    <a *ngIf="!hasLoggedIn" (click)="login()" class="px-4 btn btn-primary ms-1" role="button"
+    @if(!hasLoggedIn){
-    ><i class="fa fa-sign-in" aria-hidden="true"></i> {{ 'AbpAccount::Login' | abpLocalization }}</a
+      <a (click)="login()" class="px-4 btn btn-primary ms-1" role="button"
-    >
+        ><i class="fa fa-sign-in" aria-hidden="true"></i>
+        {{ 'AbpAccount::Login' | abpLocalization }}</a
+      >
+    }
   </div>
   <div class="card">
     <div class="card-body">
       <div class="row">
         <div class="col-md-auto text-center">
-          <img src="https://abp.io/assets/png/mastering-abp-framework.webp" style="max-width: 400px;"
+          <img
-               class="w-100 mb-5 my-md-3">
+            src="https://abp.io/assets/png/mastering-abp-framework.webp"
+            style="max-width: 400px"
+            class="w-100 mb-5 my-md-3"
+          />
         </div>
         <div class="col-md d-flex align-items-center">
           <div class="pe-0 pe-md-4">
             <small class="text-uppercase text-muted">THE OFFICIAL GUIDE</small>
             <h2 class="mb-4">Mastering ABP Framework</h2>
-            <p class="mb-4">Written by the creator of the ABP Framework, this book will help you gain a complete
+            <p class="mb-4">
-              understanding of the framework and modern web application development techniques.</p>
+              Written by the creator of the ABP Framework, this book will help you gain a complete
+              understanding of the framework and modern web application development techniques.
+            </p>
             <div class="mb-4">
-              <a href="https://www.amazon.com/gp/product/B097Z2DM8Q/ref=dbs_a_def_rwt_hsch_vapi_tkin_p1_i0"
+              <a
-                 class="btn btn-success mb-1">
+                href="https://www.amazon.com/gp/product/B097Z2DM8Q/ref=dbs_a_def_rwt_hsch_vapi_tkin_p1_i0"
+                class="btn btn-success mb-1"
+              >
                 Buy on Amazon US
               </a>
               &nbsp;
-              <a href="https://www.packtpub.com/product/mastering-abp-framework/9781801079242"
+              <a
-                 class="btn btn-primary mb-1">
+                href="https://www.packtpub.com/product/mastering-abp-framework/9781801079242"
+                class="btn btn-primary mb-1"
+              >
                 Buy on PACKT
               </a>
             </div>
@@ -297,13 +309,16 @@
   <div class="mb-5 text-center">
     <p class="align-middle">
       <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"
-      ><i class="fa fa-twitter" aria-hidden="true"></i><span class="text-secondary"> Abp Framework</span></a
+        ><i class="fa fa-twitter" aria-hidden="true"></i
+        ><span class="text-secondary"> Abp Framework</span></a
       >
       <a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2"
-      ><i class="fa fa-twitter" aria-hidden="true"></i><span class="text-secondary"> Abp Commercial</span></a
+        ><i class="fa fa-twitter" aria-hidden="true"></i
+        ><span class="text-secondary"> Abp Commercial</span></a
       >
       <a href="https://github.com/abpframework/abp" target="_blank" class="mx-2"
-      ><i class="fa fa-github" aria-hidden="true"></i><span class="text-secondary"> abpframework</span></a
+        ><i class="fa fa-github" aria-hidden="true"></i
+        ><span class="text-secondary"> abpframework</span></a
       >
     </p>
   </div>
@@ -313,20 +328,17 @@
   <div class="col-lg-4 border-start">
     <div class="p-4">
       <h5 class="mb-3">
-        <i class="fas fa-cubes text-secondary d-block my-3 fa-2x" aria-hidden="true"></i> {{ context.title }}
+        <i class="fas fa-cubes text-secondary d-block my-3 fa-2x" aria-hidden="true"></i>
+        {{ context.title }}
       </h5>
       <p [innerHTML]="context.description"></p>
-      <ng-container
+      @if (context.customTemplate) {
-        *ngIf="context.customTemplate"
+      <ng-container [ngTemplateOutlet]="context.customTemplate"></ng-container>
-        [ngTemplateOutlet]="context.customTemplate"
+      } @for (link of context.links; track $index) {
-      ></ng-container>
+      <a [href]="link.href" target="_blank" class="btn btn-link px-1"
-      <a
+        >{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i
-        *ngFor="let link of context.links"
-        [href]="link.href"
-        target="_blank"
-        class="btn btn-link px-1"
-      >{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i
       ></a>
+      }
     </div>
   </div>
 </ng-template>
@@ -338,7 +350,7 @@
         <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary" aria-hidden="true"></i>
         <span [innerHTML]="context.title"></span>
         <a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link"
-        >Details <i class="fas fa-chevron-right" aria-hidden="true"></i
+          >Details <i class="fas fa-chevron-right" aria-hidden="true"></i
         ></a>
       </h6>
     </div>