Closed dsichrovsky closed 6 years ago
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:
Like @dsichrovsky said, that issue was introduced in primeng's transition: 5.0.0 => 5.0.2
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:
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>
This is fixed, I'd suggest using 5.1.0's p-button as it does not do dom operations like pButton directive.
I'm submitting a ... (check one with "x")
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 https://github.com/primefaces/primeng/issues/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