fix(material): remove template expression as Angular 12 breaks it again

klemenoslaj · May 25, 2021 · 1c4e9f4 · 1c4e9f4
1 parent 3150fd2
commit 1c4e9f4
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 31 deletions.
diff --git a/projects/material/src/lib/action-mat-anchor.component.ts b/projects/material/src/lib/action-mat-anchor.component.ts
@@ -1,7 +1,6 @@
 import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation, Inject, HostBinding } from '@angular/core';
 import { ActionAnchor, ActionAnchorComponentImpl } from '@ng-action-outlet/core';
 
-import { actionMatButtonTemplate } from './action-mat-button.template';
 import { ICON_TYPE, ACTION_ICON_TYPE_TOKEN } from './action-icon-type-token';
 
 @Component({
@@ -15,7 +14,7 @@ import { ICON_TYPE, ACTION_ICON_TYPE_TOKEN } from './action-icon-type-token';
         [href]="href"
         [attr.target]="_action.target$ | async"
       >
-        <ng-container *ngTemplateOutlet="content; context: { $implicit: _action }"></ng-container>
+        <action-mat-content [action]="_action"></action-mat-content>
       </a>
 
       <a
@@ -25,11 +24,9 @@ import { ICON_TYPE, ACTION_ICON_TYPE_TOKEN } from './action-icon-type-token';
         [routerLink]="routerLink"
         [target]="_action.target$ | async"
       >
-        <ng-container *ngTemplateOutlet="content; context: { $implicit: _action }"></ng-container>
+        <action-mat-content [action]="_action"></action-mat-content>
       </a>
     </ng-container>
-
-    ${actionMatButtonTemplate}
   `,
   styleUrls: ['./action-mat-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/projects/material/src/lib/action-mat-button.component.ts b/projects/material/src/lib/action-mat-button.component.ts
@@ -1,19 +1,16 @@
 import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Inject } from '@angular/core';
 import { ActionButton, ActionButtonComponentImpl } from '@ng-action-outlet/core';
 
-import { actionMatButtonTemplate } from './action-mat-button.template';
 import { ICON_TYPE, ACTION_ICON_TYPE_TOKEN } from './action-icon-type-token';
 
 @Component({
   selector: 'action-mat-button',
   template: `
     <ng-container *ngIf="_action && _action.visible$ | async">
       <button mat-button [actionMatButton]="_action">
-        <ng-container *ngTemplateOutlet="content; context: { $implicit: _action }"></ng-container>
+        <action-mat-content [action]="_action"></action-mat-content>
       </button>
     </ng-container>
-
-    ${actionMatButtonTemplate}
   `,
   styleUrls: ['./action-mat-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/projects/material/src/lib/action-mat-button.template.ts b/projects/material/src/lib/action-mat-button.template.ts
diff --git a/projects/material/src/lib/action-mat-content.component.ts b/projects/material/src/lib/action-mat-content.component.ts
@@ -0,0 +1,38 @@
+import { HostBinding, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { ActionButton } from '@ng-action-outlet/core';
+import { ActionAnchor } from '@ng-action-outlet/core';
+import { ACTION_ICON_TYPE_TOKEN, ICON_TYPE } from './action-icon-type-token';
+
+@Component({
+  selector: 'action-mat-content',
+  template: `
+    <mat-icon *ngIf="action?.icon$ | async; let icon" [svgIcon]="_isSvgIcon() ? icon : null">
+      {{ icon }}
+    </mat-icon>
+
+    <span [innerHTML]="action?.title$ | async"></span>
+  `,
+  styles: [
+    `
+      .action-mat-content {
+        display: contents;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class ActionMatContentComponent {
+  @HostBinding('class.action-mat-content') readonly _classname = true;
+  @Input() action?: ActionButton | ActionAnchor;
+
+  constructor(
+    @Inject(ACTION_ICON_TYPE_TOKEN)
+    readonly _iconType: ICON_TYPE,
+  ) {}
+
+  _isSvgIcon() {
+    return this._iconType === ICON_TYPE.Svg;
+  }
+}
diff --git a/projects/material/src/lib/action-mat-group.component.ts b/projects/material/src/lib/action-mat-group.component.ts
@@ -2,7 +2,6 @@ import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBindi
 import { ActionGroup, ActionGroupComponentImpl } from '@ng-action-outlet/core';
 
 import { trackByAction, TrackByAction } from './common';
-import { actionMatButtonTemplate } from './action-mat-button.template';
 import { ACTION_ICON_TYPE_TOKEN, ICON_TYPE } from './action-icon-type-token';
 
 @Component({
@@ -23,11 +22,9 @@ import { ACTION_ICON_TYPE_TOKEN, ICON_TYPE } from './action-icon-type-token';
     <ng-template #dropdown>
       <action-mat-menu [action]="_action" #actionMenu="actionMatMenu"></action-mat-menu>
       <button mat-button [actionMatButton]="_action" [matMenuTriggerFor]="actionMenu._menu">
-        <ng-container *ngTemplateOutlet="content; context: { $implicit: _action }"></ng-container>
+        <action-mat-content [action]="_action"></action-mat-content>
       </button>
     </ng-template>
-
-    ${actionMatButtonTemplate}
   `,
   styles: [
     `

diff --git a/projects/material/src/lib/action-mat-menu.component.ts b/projects/material/src/lib/action-mat-menu.component.ts
@@ -11,7 +11,6 @@ import { AnyAction, ActionGroup, ActionGroupComponentImpl, ActionAnchor } from '
 import { MatMenu } from '@angular/material/menu';
 
 import { trackByAction, TrackByAction } from './common';
-import { actionMatButtonTemplate } from './action-mat-button.template';
 import { ACTION_ICON_TYPE_TOKEN, ICON_TYPE } from './action-icon-type-token';
 
 @Component({
@@ -41,7 +40,7 @@ import { ACTION_ICON_TYPE_TOKEN, ICON_TYPE } from './action-icon-type-token';
                 [href]="href"
                 [attr.target]="action.target$ | async"
               >
-                <ng-container *ngTemplateOutlet="content; context: { $implicit: action }"></ng-container>
+                <action-mat-content [action]="action"></action-mat-content>
               </a>
               <a
                 *ngIf="action.routerLink$ | async; let routerLink"
@@ -50,12 +49,12 @@ import { ACTION_ICON_TYPE_TOKEN, ICON_TYPE } from './action-icon-type-token';
                 [routerLink]="routerLink"
                 [target]="action.target$ | async"
               >
-                <ng-container *ngTemplateOutlet="content; context: { $implicit: action }"></ng-container>
+                <action-mat-content [action]="action"></action-mat-content>
               </a>
             </ng-container>
 
             <button *ngSwitchDefault mat-menu-item [actionMatButton]="action">
-              <ng-container *ngTemplateOutlet="content; context: { $implicit: action }"></ng-container>
+              <action-mat-content [action]="action"></action-mat-content>
             </button>
           </ng-container>
         </ng-template>
@@ -77,13 +76,11 @@ import { ACTION_ICON_TYPE_TOKEN, ICON_TYPE } from './action-icon-type-token';
             [actionMatButton]="action"
             [matMenuTriggerFor]="menu"
           >
-            <ng-container *ngTemplateOutlet="content; context: { $implicit: action }"></ng-container>
+            <action-mat-content [action]="action"></action-mat-content>
           </button>
         </ng-template>
       </ng-template>
     </mat-menu>
-
-    ${actionMatButtonTemplate}
   `,
   styles: [
     `

diff --git a/projects/material/src/lib/action-mat.module.ts b/projects/material/src/lib/action-mat.module.ts
@@ -13,6 +13,7 @@ import { ActionMatMenuComponent } from './action-mat-menu.component';
 import { ICON_TYPE, ACTION_ICON_TYPE_TOKEN } from './action-icon-type-token';
 import { ActionMatButtonDirective } from './action-mat-button.directive';
 import { RouterModule } from '@angular/router';
+import { ActionMatContentComponent } from './action-mat-content.component';
 
 @NgModule({
   imports: [
@@ -30,6 +31,7 @@ import { RouterModule } from '@angular/router';
     ActionMatMenuComponent,
     ActionMatButtonDirective,
     ActionMatAnchorComponent,
+    ActionMatContentComponent,
   ],
   exports: [ActionMatButtonComponent, ActionMatAnchorComponent, ActionMatGroupComponent],
   providers: [