fix #52

porscheinformatik · Jan 22, 2021 · e5ca3c1 · e5ca3c1
1 parent 55303cd
commit e5ca3c1
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 18 deletions.
diff --git a/projects/material-addons/src/lib/card/card.component.html b/projects/material-addons/src/lib/card/card.component.html
@@ -2,9 +2,9 @@
   <mat-card-header>
     <mat-card-title>
       {{ title }}
-      <button (click)="toggleCollapse()" *ngIf="expandable && !editMode" mat-icon-button>
+      <mad-icon-button (click)="toggleCollapse()" *ngIf="expandable && !editMode">
         <mat-icon [@rotateIcon]="!expanded">keyboard_arrow_down</mat-icon>
-      </button>
+      </mad-icon-button>
     </mat-card-title>
     <mad-icon-button [title]="editText" (click)="onEdit()" *ngIf="!readonly && !editMode">
       <mat-icon>create</mat-icon>

diff --git a/...s/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.html b/...s/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.html
@@ -4,7 +4,7 @@
 
 <ng-container *ngIf="!!readonly">
   <mad-readonly-form-field
-    [label]="label"
+    [label]="getLabel()"
     [value]="value"
     [textAlign]="textAlign"
     [formatNumber]="formatNumber"

diff --git a/...ons/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.ts b/...ons/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.ts
@@ -50,7 +50,8 @@ export class ReadOnlyFormFieldWrapperComponent implements OnInit, AfterViewInit,
   @Input('unitPosition') unitPosition: 'right' | 'left' = 'left';
   @Input('errorMessage') errorMessage: string | null = null;
 
-  constructor(private changeDetector: ChangeDetectorRef) {}
+  constructor(private changeDetector: ChangeDetectorRef) {
+  }
 
   ngOnInit(): void {
     this.doRendering();
@@ -64,6 +65,13 @@ export class ReadOnlyFormFieldWrapperComponent implements OnInit, AfterViewInit,
     this.doRendering();
   }
 
+  getLabel(): string {
+    if (!this.label) {
+      this.extractLabel();
+    }
+    return this.label;
+  }
+
   private doRendering(): void {
     if (!this.originalContent) {
       return;
@@ -73,16 +81,13 @@ export class ReadOnlyFormFieldWrapperComponent implements OnInit, AfterViewInit,
       return;
     }
 
-    this.setLabel();
-
-    // TODO remove. Does not work 100% with data binding when values are changed/deleted after rendering
-    // if (!this.value) {
-    //   this.tryToExtractValue();
-    // }
     this.changeDetector.detectChanges();
   }
 
-  private setLabel(): void {
+  private extractLabel(): void {
+    if (!this.originalContent || !this.originalContent.nativeElement) {
+      return null;
+    }
     const labelElement = this.originalContent.nativeElement.querySelector('mat-label');
     this.label = labelElement ? labelElement.innerHTML : 'mat-label is missing!';
   }

diff --git a/src/app/example-components/card-editable/card-editable.component.html b/src/app/example-components/card-editable/card-editable.component.html
@@ -17,15 +17,16 @@
       <mat-spinner *ngIf="isLoading"></mat-spinner>
     </div>
     <mad-readonly-form-field-wrapper [readonly]="!isInEditMode" [value]="firstName">
+      <mat-label>First Name</mat-label>
       <mat-form-field class="form-group">
-        <mat-label>First Name</mat-label>
-        <input [(ngModel)]="firstName" autocomplete="off" class="form-control" id="firstName1" matInput name="firstName" />
+        <input [(ngModel)]="firstName" autocomplete="off" class="form-control" id="firstName1" matInput
+               name="firstName"/>
       </mat-form-field>
     </mad-readonly-form-field-wrapper>
     <mad-readonly-form-field-wrapper [readonly]="!isInEditMode" [value]="lastName">
       <mat-form-field class="form-group">
-        <mat-label>Last Name</mat-label>
-        <input [(ngModel)]="lastName" autocomplete="off" class="form-control" id="lastName1" matInput name="lastName" />
+        <mat-label>{{asyncName | async}}</mat-label>
+        <input [(ngModel)]="lastName" autocomplete="off" class="form-control" id="lastName1" matInput name="lastName"/>
       </mat-form-field>
     </mad-readonly-form-field-wrapper>
   </mad-card>

diff --git a/src/app/example-components/card-editable/card-editable.component.ts b/src/app/example-components/card-editable/card-editable.component.ts
@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
-import { timer } from 'rxjs';
-import { finalize } from 'rxjs/operators';
+import {Component} from '@angular/core';
+import {of, timer} from 'rxjs';
+import {delay, finalize} from 'rxjs/operators';
 
 @Component({
   selector: 'app-card-editable',
@@ -13,6 +13,9 @@ export class CardEditableComponent {
   lastName = 'Doe';
   isLoading = false;
 
+  /* Simulate async translation pipe */
+  asyncName = of('Last Name').pipe(delay(1000));
+
   onEditMode(): void {
     this.isInEditMode = true;
   }