Button of label is not updated properly

[dsichrovsky]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

In version 5.0.2 all localized button labels are empty however content in span tag is rendered correctly but style is applied incorrectly with text-indent: -99999999px;

This is probably connected with #1657 issue

in version 5.0.0 translation of buttons with ngx-translate was working

Expected behavior

Button shows localized label
Minimal reproduction of the problem with instructions
<button pButton type="button" (click)="login()" [label]="'Login' | translate">

What is the motivation / use case for changing the behavior?
Localized buttons

Please tell us about your environment:
Ubuntu 17.10, PhpStorm 2017.1

• Angular version: 5.0.3
• PrimeNG version: 5.0.2

• Browser: All

• Language: TypeScript 2.4.2

• Node (for AoT issues): node --version = v7.8.0

[lebnic]

Same for me, here are my package.json dependencies:

{
  "name": "my-proj",
  "version": "5.2.0",
  "license": "",
  "angular-cli": {},
  "scripts": {
    "sass-layout": "sass --scss --sourcemap=none src/assets/layout/css/layout-fn.scss src/assets/layout/css/layout-fn.css",
    "sass-theme": "sass --scss --sourcemap=none src/assets/theme/theme-fn.scss src/assets/theme/theme-fn.css",
    "build-css": "npm run sass-layout && npm run sass-theme",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.0.3",
      "@angular/cdk": "5.0.0-rc.1",
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@angular/platform-server": "5.0.3",
    "@angular/router": "5.0.3",
    "@ngx-translate/core": "9.0.0",
    "@ngx-translate/http-loader": "2.0.0",
      "@angular/material": "5.0.0-rc.1",
    "material-design-icons": "3.0.1",
    "angular2-highcharts": "0.5.5",
    "angulartics2": "4.0.4",
    "core-js": "2.5.1",
    "file-saver": "1.3.3",
    "jquery": "3.2.1",
    "nanoscroller": "0.8.7",
    "ngx-cookie": "2.0.1",
    "primeng": "5.0.0",
    "rxjs": "5.5.2",
    "ts-helpers": "1.1.2",
    "typescript": "2.4.2",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.5.3",
    "@types/jasmine": "2.8.2",
    "@types/node": "8.0.53",
    "codelyzer": "4.0.1",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-remap-istanbul": "0.6.0",
    "protractor": "5.2.0",
    "ts-node": "3.3.0",
    "tslint": "5.8.0",
    "webdriver-manager": "12.0.6",
    "webpack": "3.8.1"
  }
}

Here's content of app.module.ts:

import {
  Injectable,
  Injector,
  InjectionToken,
  NgModule,
  ErrorHandler
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, Http } from '@angular/http';
import { BrowserModule, Title } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { CookieModule } from 'ngx-cookie';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import {
  CookieService
} from 'ngx-cookie';

import { AppComponent } from './app.component';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes, { useHash: false }),
    CookieModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
  })
  ],
  declarations: [],
  providers: [
    Title,
    CookieService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here's a sample to reproduce the issue:

        <button pButton type="button" label="{{ 'connect' | translate }}"></button>

Here's a snapshot that demonstrates what the issue looks like:

Moreover, "concatenating" seems to "fix / workaround" the issue, here's a sample to reproduce this workaround:

        <button pButton type="button" label="{{ 'connect' | translate }} ?"></button>

And a screenshot:

[lebnic]

Like @dsichrovsky said, that issue was introduced in primeng's transition: 5.0.0 => 5.0.2

[chamgda]

This is a more general issue.
If the label input initially is falsy the class ui-button-text-empty is added to the button but never removed when the label input becomes truthy:

http://plnkr.co/edit/0D0HfAGquXJW8hgpEJkL?p=preview

[sabithpocker]

I had to fix it for now by doing:

        <button pButton 
          type="button" 
          class="ui-button-secondary" 
          icon="fa-history" 
          iconPos="left" 
          [label]="(revisionNumber | async) || true"></button>

[cagataycivici]

This is fixed, I'd suggest using 5.1.0's p-button as it does not do dom operations like pButton directive.