Repository: jhipster/generator-jhipster (ts)

Issue:
Support strictTemplates in Angular
##### **Overview of the feature request**

Angular 9 offers a new strict mode for templates: https://angular.io/guide/template-typecheck#strict-mode

Set `strictTemplates=true` in Angular compiler config and resolve all problems this finds.

<!-- Explain the feature request -->

##### **Motivation for or Use Case**

Offer higher code quality for JHipster users.

If for some JHipster users is `strictTemplates` mandatory then offer code which compiles without changes.

<!-- Explain why this new feature is important for you -->

##### **Related issues or PR**

Some discussion is in mailing list: https://groups.google.com/forum/?hl=en#!topic/jhipster-dev/aTAX01gv0rU

Follow up to #10631 and #11262

<!-- Has a similar feature request been asked for before? Please search both closed & open issues -->

-   [x] Checking this box is mandatory (this is just to show you read everything)

<!-- Love JHipster? Please consider supporting our collective:
👉  https://opencollective.com/generator-jhipster/donate -->


Pull request:
Use strictTemplates in Angular
Resolve #11763 

-   Please make sure the below checklist is followed for Pull Requests.

-   [x] [All continuous integration tests](https://github.com/jhipster/generator-jhipster/actions) are green
-   [ ] Tests are added where necessary
-   [ ] Documentation is added/updated where necessary
-   [ ] Coding Rules & Commit Guidelines as per our [CONTRIBUTING.md document](https://github.com/jhipster/generator-jhipster/blob/master/CONTRIBUTING.md) are followed

<!--
Please also reference the issue number in a commit message to [automatically close the related Github issue](https://help.github.com/articles/closing-issues-via-commit-messages/)

Note: It is also possible to add `[skip ci]` or `[ci skip]` to your commit message to skip continuous integration tests
-->


Patch:
diff --git a/generators/client/needle-api/needle-client-angular.js b/generators/client/needle-api/needle-client-angular.js
index 397701ab07..b22940e588 100644
--- a/generators/client/needle-api/needle-client-angular.js
+++ b/generators/client/needle-api/needle-client-angular.js
@@ -153,7 +153,7 @@ module.exports = class extends needleClientBase {
             // prettier-ignore
             this.generator.stripMargin(`|<li>
                              |                        <a class="dropdown-item" routerLink="${routerName}" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
-                             |                            <fa-icon icon="asterisk" fixedWidth="true"></fa-icon>
+                             |                            <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
                              |                            <span${enableTranslation ? ` jhiTranslate="global.menu.entities.${entityTranslationKeyMenu}"` : ''}>${_.startCase(routerName)}</span>
                              |                        </a>
                              |                    </li>`);
@@ -168,7 +168,7 @@ module.exports = class extends needleClientBase {
         // prettier-ignore
         const entityEntry = `<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                                 <a class="nav-link" routerLink="${routerName}" (click)="collapseNavbar()">
-                                    <fa-icon icon="${iconName}" fixedWidth="true"></fa-icon>
+                                    <fa-icon icon="${iconName}" [fixedWidth]="true"></fa-icon>
                                     <span${enableTranslation ? ` jhiTranslate="global.menu.${translationKeyMenu}"` : ''}>${_.startCase(routerName)}</span>
                                 </a>
                             </li>`;
@@ -184,7 +184,7 @@ module.exports = class extends needleClientBase {
         // prettier-ignore
         const entityEntry = `<li>
                         <a class="dropdown-item" routerLink="${routerName}" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="${iconName}" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="${iconName}" [fixedWidth]="true"></fa-icon>
                             <span${enableTranslation ? ` jhiTranslate="global.menu.admin.${translationKeyMenu}"` : ''}>${_.startCase(routerName)}</span>
                         </a>
                     </li>`;
diff --git a/generators/client/templates/angular/src/main/webapp/app/admin/audits/audit-data.model.ts.ejs b/generators/client/templates/angular/src/main/webapp/app/admin/audits/audit-data.model.ts.ejs
index 4a1d421590..1ad7531b46 100644
--- a/generators/client/templates/angular/src/main/webapp/app/admin/audits/audit-data.model.ts.ejs
+++ b/generators/client/templates/angular/src/main/webapp/app/admin/audits/audit-data.model.ts.ejs
@@ -18,7 +18,8 @@
 -%>
 export class AuditData {
     constructor(
-        public remoteAddress: string,
-        public sessionId: string
+        public remoteAddress?: string,
+        public sessionId?: string,
+        public message?: string
     ) {}
 }
diff --git a/generators/client/templates/angular/src/main/webapp/app/admin/audits/audits.component.html.ejs b/generators/client/templates/angular/src/main/webapp/app/admin/audits/audits.component.html.ejs
index e05bddfb95..f6798e2e2b 100644
--- a/generators/client/templates/angular/src/main/webapp/app/admin/audits/audits.component.html.ejs
+++ b/generators/client/templates/angular/src/main/webapp/app/admin/audits/audits.component.html.ejs
@@ -43,7 +43,7 @@
         <span jhiTranslate="audits.notFound">No audit found</span>
     </div>
 
-    <div class="table-responsive" *ngIf="audits?.length > 0">
+    <div class="table-responsive" *ngIf="audits && audits.length > 0">
         <table class="table table-sm table-striped" aria-describedby="audits-page-heading">
             <thead [ngSwitch]="canLoad()">
                 <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" [callback]="transition.bind(this)" *ngSwitchCase="true">
@@ -65,15 +65,15 @@
                     <td><small>{{ audit.principal }}</small></td>
                     <td>{{ audit.type }}</td>
                     <td>
-                        <span *ngIf="audit.data" ng-show="audit.data.message">{{ audit.data.message }}</span>
-                        <span *ngIf="audit.data" ng-show="audit.data.remoteAddress"><span jhiTranslate="audits.table.data.remoteAddress">Remote Address</span> {{ audit.data.remoteAddress }}</span>
+                        <span *ngIf="audit.data?.message">{{ audit.data.message }}</span>
+                        <span *ngIf="audit.data?.remoteAddress"><span jhiTranslate="audits.table.data.remoteAddress">Remote Address</span> {{ audit.data.remoteAddress }}</span>
                     </td>
                 </tr>
             </tbody>
         </table>
     </div>
 
-    <div *ngIf="audits?.length > 0">
+    <div *ngIf="audits && audits.length > 0">
         <div class="row justify-content-center">
             <jhi-item-count [page]="page" [total]="totalItems" [itemsPerPage]="itemsPerPage"></jhi-item-count>
         </div>
diff --git a/generators/client/templates/angular/src/main/webapp/app/admin/user-management/user-management-detail.component.html.ejs b/generators/client/templates/angular/src/main/webapp/app/admin/user-management/user-management-detail.component.html.ejs
index b8356f232b..8d114699bc 100644
--- a/generators/client/templates/angular/src/main/webapp/app/admin/user-management/user-management-detail.component.html.ejs
+++ b/generators/client/templates/angular/src/main/webapp/app/admin/user-management/user-management-detail.component.html.ejs
@@ -28,7 +28,7 @@
                 <dd>
                     <span>{{ user.login }}</span>
                     <jhi-boolean
-                        [value]="user.activated"
+                        [value]="user.activated ? true : false"
                     <%_ if (enableTranslation) { _%>
                         [textTrue]="'userManagement.activated' | translate"
                         [textFalse]="'userManagement.deactivated' | translate">
diff --git a/generators/client/templates/angular/src/main/webapp/app/layouts/navbar/navbar.component.html.ejs b/generators/client/templates/angular/src/main/webapp/app/layouts/navbar/navbar.component.html.ejs
index b8cd0a9181..aa3da713c0 100644
--- a/generators/client/templates/angular/src/main/webapp/app/layouts/navbar/navbar.component.html.ejs
+++ b/generators/client/templates/angular/src/main/webapp/app/layouts/navbar/navbar.component.html.ejs
@@ -59,7 +59,7 @@
                     <%_ if (applicationType === 'gateway' && serviceDiscoveryType) { _%>
                     <li>
                         <a class="dropdown-item" routerLink="admin/gateway" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="road" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="road" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.admin.gateway">Gateway</span>
                         </a>
                     </li>
@@ -67,7 +67,7 @@
                     <%_ if (!skipUserManagement) { _%>
                     <li>
                         <a class="dropdown-item" routerLink="admin/user-management" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="user" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="user" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.admin.userManagement">User management</span>
                         </a>
                     </li>
@@ -75,46 +75,46 @@
                     <%_ if (websocket === 'spring-websocket') { _%>
                     <li>
                         <a class="dropdown-item" routerLink="admin/tracker" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="eye" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="eye" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.admin.tracker">User tracker</span>
                         </a>
                     </li>
                     <%_ } _%>
                     <li>
                         <a class="dropdown-item" routerLink="admin/metrics" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="tachometer-alt" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="tachometer-alt" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.admin.metrics">Metrics</span>
                         </a>
                     </li>
                     <li>
                         <a class="dropdown-item" routerLink="admin/health" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="heart" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="heart" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.admin.health">Health</span>
                         </a>
                     </li>
                     <li>
                         <a class="dropdown-item" routerLink="admin/configuration" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="list" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="list" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.admin.configuration">Configuration</span>
                         </a>
                     </li>
                     <%_ if ((databaseType !== 'no' || authenticationType === 'uaa') && databaseType !== 'cassandra') { _%>
                     <li>
                         <a class="dropdown-item" routerLink="admin/audits" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="bell" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="bell" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.admin.audits">Audits</span>
                         </a>
                     </li>
                     <%_ } _%>
                     <li>
                         <a class="dropdown-item" routerLink="admin/logs" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="tasks" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="tasks" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.admin.logs">Logs</span>
                         </a>
                     </li>
                     <li *ngIf="swaggerEnabled">
                         <a class="dropdown-item" routerLink="admin/docs" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="book" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="book" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.admin.apidocs">API</span>
                         </a>
                     </li>
@@ -122,7 +122,7 @@
                     <%_ if (devDatabaseType === 'h2Disk' || devDatabaseType === 'h2Memory' || devDatabaseType === 'couchbase') { _%>
                     <li *ngIf="!inProduction">
                         <a class="dropdown-item" href='<% if (devDatabaseType === 'couchbase') { %>http://localhost:8091/<% } else { %>./h2-console<% } %>' target="_tab" (click)="collapseNavbar()">
-                            <fa-icon icon="hdd" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="hdd" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.admin.database">Database</span>
                         </a>
                     </li>
@@ -160,13 +160,13 @@
                     <%_ if (!skipUserManagement) { _%>
                     <li *ngSwitchCase="true">
                         <a class="dropdown-item" routerLink="account/settings" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="wrench" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.account.settings">Settings</span>
                         </a>
                     </li>
                     <li *ngSwitchCase="true">
                         <a class="dropdown-item" routerLink="account/password" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="lock" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="lock" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.account.password">Password</span>
                         </a>
                     </li>
@@ -174,27 +174,27 @@
                     <%_ if (authenticationType === 'session' && !skipUserManagement) { _%>
                     <li *ngSwitchCase="true">
                         <a class="dropdown-item" routerLink="account/sessions" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="cloud" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="cloud" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.account.sessions">Sessions</span>
                         </a>
                     </li>
                     <%_ } _%>
                     <li *ngSwitchCase="true">
                         <a class="dropdown-item" (click)="logout()" id="logout">
-                            <fa-icon icon="sign-out-alt" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.account.logout">Sign out</span>
                         </a>
                     </li>
                     <li *ngSwitchCase="false">
                         <a class="dropdown-item" (click)="login()" id="login">
-                            <fa-icon icon="sign-in-alt" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="sign-in-alt" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.account.login">Sign in</span>
                         </a>
                     </li>
                     <%_ if (!skipUserManagement) { _%>
                     <li *ngSwitchCase="false">
                         <a class="dropdown-item" routerLink="account/register" routerLinkActive="active" (click)="collapseNavbar()">
-                            <fa-icon icon="user-plus" fixedWidth="true"></fa-icon>
+                            <fa-icon icon="user-plus" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.account.register">Register</span>
                         </a>
                     </li>
diff --git a/generators/client/templates/angular/src/main/webapp/app/shared/alert/alert-error.component.ts.ejs b/generators/client/templates/angular/src/main/webapp/app/shared/alert/alert-error.component.ts.ejs
index 99a3579165..88ceb9cb63 100644
--- a/generators/client/templates/angular/src/main/webapp/app/shared/alert/alert-error.component.ts.ejs
+++ b/generators/client/templates/angular/src/main/webapp/app/shared/alert/alert-error.component.ts.ejs
@@ -31,7 +31,7 @@ import { AlertError } from './alert-error.model';
     template: `
         <div class="alerts" role="alert">
             <div *ngFor="let alert of alerts" [ngClass]="setClasses(alert)">
-                <ngb-alert *ngIf="alert && alert.type && alert.msg" [type]="alert.type" (close)="alert.close(alerts)">
+                <ngb-alert *ngIf="alert && alert.type && alert.msg" [type]="alert.type" (close)="close(alert)">
                     <pre [innerHTML]="alert.msg"></pre>
                 </ngb-alert>
             </div>
@@ -147,4 +147,8 @@ export class AlertErrorComponent implements OnDestroy {
 
         this.alerts.push(this.alertService.addAlert(newAlert, this.alerts));
     }
+
+    close(alert: JhiAlert): void {
+        alert.close?.(this.alerts);
+    }
 }
diff --git a/generators/client/templates/angular/src/main/webapp/app/shared/alert/alert.component.ts.ejs b/generators/client/templates/angular/src/main/webapp/app/shared/alert/alert.component.ts.ejs
index 619310b40c..6babce3878 100644
--- a/generators/client/templates/angular/src/main/webapp/app/shared/alert/alert.component.ts.ejs
+++ b/generators/client/templates/angular/src/main/webapp/app/shared/alert/alert.component.ts.ejs
@@ -24,7 +24,7 @@ import { JhiAlertService, JhiAlert } from 'ng-jhipster';
     template: `
         <div class="alerts" role="alert">
             <div *ngFor="let alert of alerts" [ngClass]="setClasses(alert)">
-                <ngb-alert *ngIf="alert && alert.type && alert.msg" [type]="alert.type" (close)="alert.close(alerts)">
+                <ngb-alert *ngIf="alert && alert.type && alert.msg" [type]="alert.type" (close)="close(alert)">
                     <pre [innerHTML]="alert.msg"></pre>
                 </ngb-alert>
             </div>
@@ -50,4 +50,8 @@ export class AlertComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void {
         this.alertService.clear();
     }
+
+    close(alert: JhiAlert): void {
+        alert.close?.(this.alerts);
+    }
 }
diff --git a/generators/client/templates/angular/tsconfig.json.ejs b/generators/client/templates/angular/tsconfig.json.ejs
index a367d16508..e3297f5a88 100644
--- a/generators/client/templates/angular/tsconfig.json.ejs
+++ b/generators/client/templates/angular/tsconfig.json.ejs
@@ -41,7 +41,7 @@
     "angularCompilerOptions": {
       "genDir": "<%= AOT_DIR %>",
       "fullTemplateTypeCheck": true,
+      "strictTemplates": true,
       "preserveWhitespaces": true
     }
-  }
-  
\ No newline at end of file
+}
diff --git a/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management-detail.component.html.ejs b/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management-detail.component.html.ejs
index e747e2de2c..fd2e6ed552 100644
--- a/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management-detail.component.html.ejs
+++ b/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management-detail.component.html.ejs
@@ -37,14 +37,14 @@
                     <span jhiTranslate="{{ '<%= angularAppName %>.<%= fieldType %>.' + <%= entityInstance %>.<%= fieldName %> }}">{{ <%= entityInstance %>.<%= fieldName %> }}</span>
                     <%_ } else if (['byte[]', 'ByteBuffer'].includes(fieldType) && fieldTypeBlobContent === 'image') { _%>
                     <div *ngIf="<%= entityInstance %>.<%= fieldName %>">
-                        <a (click)="openFile(<%= entityInstance %>?.<%= fieldName %>ContentType!, <%= entityInstance %>?.<%= fieldName %>)">
+                        <a (click)="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)">
                             <img [src]="'data:' + <%= entityInstance %>.<%= fieldName %>ContentType + ';base64,' + <%= entityInstance %>.<%= fieldName %>" style="max-width: 100%;" alt="<%= entityInstance %> image"/>
                         </a>
                         {{ <%= entityInstance %>.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>.<%= fieldName %>) }}
                     </div>
                     <%_ } else if (['byte[]', 'ByteBuffer'].includes(fieldType) && fieldTypeBlobContent === 'any') { _%>
                     <div *ngIf="<%= entityInstance %>.<%= fieldName %>">
-                        <a (click)="openFile(<%= entityInstance %>?.<%= fieldName %>ContentType!, <%= entityInstance %>?.<%= fieldName %>)" jhiTranslate="entity.action.open">open</a>
+                        <a (click)="openFile(<%= entityInstance %>.<%= fieldName %>ContentType, <%= entityInstance %>.<%= fieldName %>)" jhiTranslate="entity.action.open">open</a>
                         {{ <%= entityInstance %>.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>.<%= fieldName %>) }}
                     </div>
                     <%_ } else { _%>
diff --git a/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management-detail.component.ts.ejs b/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management-detail.component.ts.ejs
index 89c5953b74..643bcd1bb3 100644
--- a/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management-detail.component.ts.ejs
+++ b/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management-detail.component.ts.ejs
@@ -47,7 +47,7 @@ export class <%= entityAngularName %>DetailComponent implements OnInit {
         return this.dataUtils.byteSize(base64String);
     }
 
-    openFile(contentType: string, base64String: string): void {
+    openFile(contentType = '', base64String: string): void {
         this.dataUtils.openFile(contentType, base64String);
     }
     <%_ } _%>
diff --git a/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management.component.html.ejs b/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management.component.html.ejs
index f0ef4fc0ae..db7498e37a 100644
--- a/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management.component.html.ejs
+++ b/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management.component.html.ejs
@@ -58,7 +58,7 @@
         <span jhiTranslate="<%= i18nKeyPrefix %>.home.notFound">No <%= entityInstancePlural %> found</span>
     </div>
 
-    <div class="table-responsive" id="entities" *ngIf="<%= entityInstancePlural %>?.length > 0">
+    <div class="table-responsive" id="entities" *ngIf="<%= entityInstancePlural %> && <%= entityInstancePlural %>.length > 0">
         <table class="table table-striped" aria-describedby="page-heading">
             <thead>
                 <tr<% if (pagination !== 'no') { %> jhiSort [(predicate)]="predicate" [(ascending)]="ascending" [callback]="<%= pagination !== 'infinite-scroll' ? 'loadPage.bind(this)' : 'reset.bind(this)'%>"<% } %>>
@@ -187,7 +187,7 @@
     </div>
     <%_ if (pagination === 'pagination') { _%>
 
-    <div *ngIf="<%= entityInstancePlural %>?.length > 0">
+    <div *ngIf="<%= entityInstancePlural %> && <%= entityInstancePlural %>.length > 0">
         <div class="row justify-content-center">
             <jhi-item-count [page]="page" [total]="totalItems" [itemsPerPage]="itemsPerPage"></jhi-item-count>
         </div>
diff --git a/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management.component.ts.ejs b/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management.component.ts.ejs
index e68a1b591a..90343bd9bb 100644
--- a/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management.component.ts.ejs
+++ b/generators/entity-client/templates/angular/src/main/webapp/app/entities/entity-management.component.ts.ejs
@@ -67,7 +67,7 @@ export class <%= entityAngularName %>Component implements OnInit, OnDestroy {
         return this.dataUtils.byteSize(base64String);
     }
 
-    openFile(contentType: string, base64String: string): void {
+    openFile(contentType = '', base64String: string): void {
         return this.dataUtils.openFile(contentType, base64String);
     }
     <%_ } _%>


Test patch:
diff --git a/test/needle-api/needle-client-angular.spec.js b/test/needle-api/needle-client-angular.spec.js
index 9c4187aefa..df8397b330 100644
--- a/test/needle-api/needle-client-angular.spec.js
+++ b/test/needle-api/needle-client-angular.spec.js
@@ -135,7 +135,7 @@ describe('needle API Angular: JHipster client generator with blueprint', () => {
             `${CLIENT_MAIN_SRC_DIR}app/layouts/navbar/navbar.component.html`,
             '            <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">\n' +
                 '                                <a class="nav-link" routerLink="routerName1" (click)="collapseNavbar()">\n' +
-                '                                    <fa-icon icon="iconName1" fixedWidth="true"></fa-icon>\n' +
+                '                                    <fa-icon icon="iconName1" [fixedWidth]="true"></fa-icon>\n' +
                 '                                    <span jhiTranslate="global.menu.routerName1">Router Name 1</span>\n' +
                 '                                </a>\n' +
                 '                            </li>'
@@ -151,7 +151,7 @@ describe('needle API Angular: JHipster client generator with blueprint', () => {
             `${CLIENT_MAIN_SRC_DIR}app/layouts/navbar/navbar.component.html`,
             '                    <li>\n' +
                 '                        <a class="dropdown-item" routerLink="routerName2" routerLinkActive="active" (click)="collapseNavbar()">\n' +
-                '                            <fa-icon icon="iconName2" fixedWidth="true"></fa-icon>\n' +
+                '                            <fa-icon icon="iconName2" [fixedWidth]="true"></fa-icon>\n' +
                 '                            <span jhiTranslate="global.menu.admin.routerName2">Router Name 2</span>\n' +
                 '                        </a>\n' +
                 '                    </li>'
@@ -167,7 +167,7 @@ describe('needle API Angular: JHipster client generator with blueprint', () => {
             `${CLIENT_MAIN_SRC_DIR}app/layouts/navbar/navbar.component.html`,
             '                    <li>\n' +
                 '                        <a class="dropdown-item" routerLink="routerName3" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">\n' +
-                '                            <fa-icon icon="asterisk" fixedWidth="true"></fa-icon>\n' +
+                '                            <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>\n' +
                 '                            <span jhiTranslate="global.menu.entities.routerName3">Router Name 3</span>\n' +
                 '                        </a>\n' +
                 '                    </li>'