Menu
I have a very simple datepicker using AngularJS and I want to give it a placeholder to translate it using AngularJS translate (like I do usually in my project).
<div flex class="layout-row">
<md-datepicker ng-model="vm.calendarEvent.start" ng-model-options="{ timezone: 'UTC' }" md-placeholder="Une date" translate translate-md-placeholder="PROF.SHARE.DUE">
</md-datepicker>
</div>
Error: [$compile:multidir] Multiple directives [mdDatepicker (module: material.components.datepicker), translate (module: pascalprecht.translate)] asking for new/isolated scope on:
< md-datepicker class="ng-pristine ng-untouched ng-valid _md-datepicker-has-triangle-icon" ng-model="vm.calendarEvent.start" ng-model-options="{ timezone: 'UTC' }" md-placeholder="Une date" translate="" translate-md-placeholder="PROF.SHARE.DUE">
406
In Html, Placeholder text are added to input using placeholder attribute in HTML5. The same way It works in Angular for fixed placeholder text,However, The syntax is different for dynamic binding, we have to use [placeholder] You have to use property binding [] for attributes. emailPlaceholderText is an variable of type string in Angular component
Dynamic placeholder binding in Angular component. In Html, Placeholder text are added to input using placeholder attribute in HTML5.
Pipes are reusable functionalities applied in Angular components. Angular provides inbuilt pipes which we can use in placeholder text to form elements. This example displays capitalize first letter the place holder of input form element We can use titlecase pipe in placeholder text
Open your terminal and use @angular/cli to create a new project: Then navigate to the newly created project directory: Next, run the following command to add the package to your application: Now import the TranslateModule in your AppModule: This will provide access to the core of the translate service, pipe, and directives.
I think you are looking for this inline translation on md-placeholder:
<div flex class="layout-row">
<md-datepicker ng-model="vm.calendarEvent.start"
ng-model-options="{ timezone: 'UTC' }"
md-placeholder="{{ 'PROF.SHARE.DUE' | translate }}">
</md-datepicker>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
