replace interpolated text with [innerText]

We have an issue where the date picker is translated to german, but then the users browser gives them the option to translate the page. when the user does this and translates the page text values (month name for example) no long updates.
Using [innerText] solves this.

Author: chrxs

e2e/datpicker-e2e.spec.ts

@@ -183,11 +183,11 @@ describe('dpDayPicker dayPicker', () => {
 
   it('should check the first day of the week', () => {
     page.dayPickerInput.click();
-    expect(page.weekDayNames.getText()).toEqual(['Sun Mon Tue Wed Thu Fri Sat']);
+    expect(page.weekDayNames.getText()).toEqual(['SunMonTueWedThuFriSat']);
     page.clickOnBody();
     page.firstDayOfWeekMonday.click();
     page.dayPickerInput.click();
-    expect(page.weekDayNames.getText()).toEqual(['Mon Tue Wed Thu Fri Sat Sun']);
+    expect(page.weekDayNames.getText()).toEqual(['MonTueWedThuFriSatSun']);
   });
 
   it('should check month format', () => {
@@ -245,7 +245,7 @@ describe('dpDayPicker dayPicker', () => {
     page.weekDaysFormatInput.sendKeys('d');
 
     page.dayPickerInput.click();
-    expect(page.weekDayNames.getText()).toEqual(['0 1 2 3 4 5 6']);
+    expect(page.weekDayNames.getText()).toEqual(['0123456']);
   });
 
   it('should check dateFormat is working', () => {

e2e/locale-e2e.spec.ts

@@ -13,25 +13,25 @@ describe('Locales', () => {
 
     page.daytimePickerMenu.click();
     page.daytimePickerInput.click();
-    expect(page.weekDayNames.getText()).toEqual(['א׳ ב׳ ג׳ ד׳ ה׳ ו׳ ש׳']);
+    expect(page.weekDayNames.getText()).toEqual(['א׳ב׳ג׳ד׳ה׳ו׳ש׳']);
 
     page.daytimeInlineMenu.click();
-    expect(page.weekDayInline.getText()).toEqual(['א׳ ב׳ ג׳ ד׳ ה׳ ו׳ ש׳']);
+    expect(page.weekDayInline.getText()).toEqual(['א׳ב׳ג׳ד׳ה׳ו׳ש׳']);
 
     page.daytimeDirectiveMenu.click();
     page.daytimeDirectiveInput.click();
-    expect(page.weekDayNames.getText()).toEqual(['א׳ ב׳ ג׳ ד׳ ה׳ ו׳ ש׳']);
+    expect(page.weekDayNames.getText()).toEqual(['א׳ב׳ג׳ד׳ה׳ו׳ש׳']);
 
     page.dayPickerMenu.click();
     page.dayPickerInput.click();
-    expect(page.weekDayNames.getText()).toEqual(['א׳ ב׳ ג׳ ד׳ ה׳ ו׳ ש׳']);
+    expect(page.weekDayNames.getText()).toEqual(['א׳ב׳ג׳ד׳ה׳ו׳ש׳']);
 
     page.dayInlineMenu.click();
-    expect(page.weekDayInline.getText()).toEqual(['א׳ ב׳ ג׳ ד׳ ה׳ ו׳ ש׳']);
+    expect(page.weekDayInline.getText()).toEqual(['א׳ב׳ג׳ד׳ה׳ו׳ש׳']);
 
     page.dayDirectiveMenu.click();
     page.dayDirectiveInput.click();
-    expect(page.weekDayNames.getText()).toEqual(['א׳ ב׳ ג׳ ד׳ ה׳ ו׳ ש׳']);
+    expect(page.weekDayNames.getText()).toEqual(['א׳ב׳ג׳ד׳ה׳ו׳ש׳']);
 
     page.monthPickerMenu.click();
     page.monthPickerInput.click();

src/app/calendar-nav/calendar-nav.component.html

@@ -1,11 +1,13 @@
 <div class="dp-calendar-nav-container">
   <div class="dp-nav-header">
-    <span [hidden]="isLabelClickable">{{label}}</span>
+    <span [hidden]="isLabelClickable"
+          [innerText]="label">
+    </span>
     <button type="button"
             class="dp-nav-header-btn"
             [hidden]="!isLabelClickable"
-            (click)="labelClicked()">
-      {{label}}
+            (click)="labelClicked()"
+            [innerText]="label">
     </button>
   </div>
 

src/app/day-calendar/day-calendar.component.html

@@ -16,19 +16,22 @@
        [ngClass]="{'dp-hide-near-month': !componentConfig.showNearMonthDays}">
     <div class="dp-weekdays">
       <span class="dp-calendar-weekday"
-            *ngFor="let weekday of weekdays">
-            {{getWeekdayName(weekday)}}
+            *ngFor="let weekday of weekdays"
+            [innerText]="getWeekdayName(weekday)">
       </span>
     </div>
     <div class="dp-calendar-week" *ngFor="let week of weeks">
-      <span *ngIf="componentConfig.showWeekNumbers" class="dp-week-number">{{week[0].date.isoWeek()}}</span>
+      <span class="dp-week-number"
+            *ngIf="componentConfig.showWeekNumbers"
+            [innerText]="week[0].date.isoWeek()">
+      </span>
       <button type="button"
               class="dp-calendar-day"
               *ngFor="let day of week"
               (click)="dayClicked(day)"
               [disabled]="day.disabled"
-              [ngClass]="getDayBtnCssClass(day)">
-        {{getDayBtnText(day)}}
+              [ngClass]="getDayBtnCssClass(day)"
+              [innerText]="getDayBtnText(day)">
       </button>
     </div>
   </div>

src/app/month-calendar/month-calendar.component.html

@@ -23,8 +23,8 @@
               *ngFor="let month of monthRow"
               [disabled]="month.disabled"
               [ngClass]="getMonthBtnCssClass(month)"
-              (click)="monthClicked(month)">
-        {{month.text}}
+              (click)="monthClicked(month)"
+              [innerText]="month.text">
       </button>
     </div>
   </div>

src/app/time-select/time-select.component.html

@@ -5,31 +5,41 @@
             [disabled]="!showIncHour"
             (click)="increase('hour')">
     </button>
-    <span class="dp-time-select-display-hours">{{hours}}</span>
+    <span class="dp-time-select-display-hours"
+          [innerText]="hours">
+    </span>
     <button type="button"
             class="dp-time-select-control-down"
             [disabled]="!showDecHour"
             (click)="decrease('hour')"></button>
   </li>
-  <li class="dp-time-select-control dp-time-select-separator">{{componentConfig.timeSeparator}}</li>
+  <li class="dp-time-select-control dp-time-select-separator"
+      [innerText]="componentConfig.timeSeparator">
+  </li>
   <li class="dp-time-select-control dp-time-select-control-minutes">
     <button type="button"
             class="dp-time-select-control-up"
             [disabled]="!showIncMinute"
             (click)="increase('minute')"></button>
-    <span class="dp-time-select-display-minutes">{{minutes}}</span>
+    <span class="dp-time-select-display-minutes"
+          [innerText]="minutes">
+    </span>
     <button type="button"
             [disabled]="!showDecMinute" class="dp-time-select-control-down"
             (click)="decrease('minute')"></button>
   </li>
   <ng-container *ngIf="componentConfig.showSeconds">
-    <li class="dp-time-select-control dp-time-select-separator">{{componentConfig.timeSeparator}}</li>
+    <li class="dp-time-select-control dp-time-select-separator"
+        [innerText]="componentConfig.timeSeparator">
+    </li>
     <li class="dp-time-select-control dp-time-select-control-seconds">
       <button type="button"
               class="dp-time-select-control-up"
               [disabled]="!showIncSecond"
               (click)="increase('second')"></button>
-      <span class="dp-time-select-display-seconds">{{seconds}}</span>
+      <span class="dp-time-select-display-seconds"
+            [innerText]="seconds">
+      </span>
       <button type="button"
               class="dp-time-select-control-down"
               [disabled]="!showDecSecond"
@@ -41,7 +51,9 @@
             class="dp-time-select-control-up"
             [disabled]="!showToggleMeridiem"
             (click)="toggleMeridiem()"></button>
-    <span class="dp-time-select-display-meridiem">{{meridiem}}</span>
+    <span class="dp-time-select-display-meridiem"
+          [innerText]="meridiem">
+    </span>
     <button type="button"
             class="dp-time-select-control-down"
             [disabled]="!showToggleMeridiem"