when use DevExtreme DataGrid,click the delete button,it shows a message,i want to reset the message language to another one - like Japanese or Russian.
my project is Angular8,at the top of app.module.ts,before #NgModule,
i set the language like this:
import xxxxxxxxx;
import {locale} from 'devextreme/localization';
locale(navigator.language);
#NgModule({
declarations: [
AppComponent,
xxxxxxx
i use Chrome,the browser's language is set to Chinese,
but when i click delete button,
the message is remain English
You need to call the loadMessages to make a localization apply to a widget. There is an online demo that shows this approach in action.
Related
I’m using ng-dompurify in an Angular 9 application and I’ve substituted the default Angular DomSanitizer with the NgDompurifyDomSanitizer implementation.
#NgModule({
// ...
providers: [
{
provide: DomSanitizer,
useClass: NgDompurifyDomSanitizer,
},
],
// ...
})
That way when doing things like
<div [innerHTML]="someHtmlString"></div>
DomPurify will be used to do the sanitation of that HTML string.
This works fine when I’m not using Ivy but when I use Ivy the rendered HTML is sanitized with something other than the NgDompurifyDomSanitizer. I’m not sure what sanitizer is being used in that case but I see that style attributes are stripped from the html elements which wouldn't happen if the NgDompurifyDomSanitizer is used.
I’ve put together a stackblitz example showing the issue here: https://stackblitz.com/edit/angular-domsanitizer-ivy. If you go into the stackblitz settings and un-check the ‘Enable Ivy’ check box you can see that the text is rendered red, but when it is checked the inline style is stripped and the text is black.
I’m not sure if there is something special I need to do to make this work with Ivy, or if it's not supported with Ivy. I’ve googled around for most of the day trying to figure it out but I haven’t had any luck.
I'd appreciate any insight someone might have.
EDIT: For those interested, this does appear to be a bug and I've opened a ticket: https://github.com/angular/angular/issues/36794
For those interested Kristiyan Kostadinov from the angular team posted a solution to the ticket I opened at: https://github.com/angular/angular/issues/36794
He said.
I think the problem is that you should be providing Sanitizer, not
DomSanitizer. Here's a working example:
https://stackblitz.com/edit/angular-domsanitizer-ivy-facotn
And changing the code to this seems to work:
#NgModule({
// ...
providers: [
{
provide: Sanitizer,
useClass: NgDompurifyDomSanitizer,
},
],
// ...
})
I'm new to react and I'm trying to create a form where extra details can be added on button click
When I'm trying to enter the value in the first input box, it just gets copied to the second input box and further on I'm not able to change its value too(This keeps on happening with all the input boxes you dynamically add)
On submitting these value I get an alert(which is fine, I was trying to fetch the state) but the main concern is the value of 2 inputs shouldn't be the same.
What I feel is I'm messing up the value={} of the tag
Can someone help me here, please?
https://codesandbox.io/s/array-form-11-q0pyr?fontsize=14&hidenavigation=1&theme=dark
You have to import ReactDOM from react-dom, thats the first issue.
import ReactDOM from 'react-dom';
The second issue you didn't add react-router-dom as Dependency.
You can`t use route without that.
npm install react-router-dom
You also didn`t close the class parenthesis as #Aasim afridi said.
Look at the fixed link #Tim Wilson gave you.
follow steps to remove bugs
1- import----> import ReactDOM from 'react-dom';
2- add------->} (closing curly brace) at the end
3- add------->react-router-dom in dependencies
and about saving data or updating state
handleAddRow = () => {
const item = {
name: "",
mobile: "",
btn: ""
};
console.log(item)
// this.setState({
// rows: [...this.state.rows, item]
// });
};
if you don't want to add another fields without updating/saving data
then first save and then on successful response add your fields/component.
Saurabh,
i fixed your issue first you did not close class paranthesis and then you have not imported react dom in your class. So now it's fixed.
Here is the link for an example of the issue I will attempt to describe. In the chips autocomplete example, click the text box to select a new fruit.
Now, before clicking anywhere else, click again on the text box as you did before.
This should result in no options showing up. The issue here is that the user must either begin keying in a new selection or first click another element in the window before matchip will show the options to choose from. I am wondering if there is a way to fix this issue. I would like a user to be able to choose a selection from the list and then immediately click the text box as they had before and make a new selection.
I'm using mat-chip-list inside an outer *ngFor iterating over a FormArray.
Here is what I'have done. It's pretty efficient :
<input
#validatorInput
#operationTrigger="matAutocompleteTrigger"
[formControl]="contactCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
(blur)="contactCtrl.setValue(''); validatorInput.value='';"
(click)="contactCtrl.setValue(''); validatorInput.value=''; operationTrigger.openPanel()">
The trick is
Always clear your html input and your (shared) formControl with an empty and not null value each time the blur and click events occur.
Do NOT do this 'clear' on the input focus event. (Because when you delete the last chip, the input is auto-focus and you will have the famous Expression has changed after it was checked.
Call operationTrigger.openPanel(); when the user click on the input
Setting contactCtrl.setValue(''); allows your autocomplete panel to be automatically opened when you call operationTrigger.openPanel()
Setting validatorInput.value=''; is just a way to properly sync your formControl with the html input to ensure a good UX/UI behavior.
Inside my formArray, the formControl is the same for all the inputs but it does not matter since the user can only manipulate one input at a given time
Since you didn't post your code and you mention the example on the material site I'm going to do it as a fork of the stackblitz example they have on their site.
But this will allow you to open the autocomplete panel again despite having had the cursor there and choosing an option previously.
// Using MatAutocompleteTrigger will give you access to the API that will allow you to
// to open the panel or keep it open
...
#ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;
...
ngAfterViewInit() {
fromEvent(this.fruitInput.nativeElement, 'click')
.pipe(
tap(() => {
this.trigger.openPanel()
})
).subscribe()
}
Link to the full stackblitz:
https://stackblitz.com/edit/angular-sb38ig
Unfortunately I have to change a html element's content in every X second because I have to show more data in such a little space... I didn't find any good example of change html elements periodically, maybe angular2 animations is a great deal for this but how should I solve the content change in every X time period?
Btw I have to change a button's content from a div to an other one with different style, elements...
Angular is a framework which binds your model to view in a declarative way using templates. All you have to do is update your model periodically and your template will automatically be updated for you.
For example, we can create a dummy observable which will emit every second, and then use the async pipe in the template to update it regularly.
#Component({
selector: 'my-app',
template: `Data: {{ data$ | async }}`,
})
export class AppComponent {
data$ = Observable.interval(400).mapTo(1).scan((a, b) => a + b, 0)
}
Here's a live demo.
Of course, details depend on the way you're receving your data and the way you want to display it, but the above example shows that it's very simple to change the HTML content periodically which was your question.
I am trying to use Material design lite with an Ember.js application and got the form working somehow. However, when the user navigates from one page to another page containing the form or inputs, the inputs do not seem to behave as expected. For an example here, when the page loads first time to home page, input works fine but when we switch between sign-in and home pages, inputs fallbacks to basic form and material design animation is lost.
Not sure if this issue is related to Ember.js or Material design but any help would be highly appreciated.
MDL requires elements to be initialized to get special effects such as buttons with ripples, or animated input boxes. They are initialized by default on page load, but elements inserted by views or components will not be initialized. The simplest approach is to initialize them on didInsertElement.
A more general approach would be a mixin which handles this for you, as in:
// mixins/mdl-button.js
export default Ember.Mixin.create() {
initializeMdlButtons: function() {
var buttons = this.get('element').querySelectorAll('.mdl-button');
[].forEach.call(buttons, button => componentHandler.upgradeElement(button));
}.on('didInsertElement')
Then in your component using buttons
import MdlButton from 'app/mixins/mdl-button';
export default Ember.Component.extend(MdlButton, {
...
});
Or, you could apply this to all components with
Ember.Component.reopen(MdlButton);
You will need to create handlers to initialize the required JS for each MDL component. You have two possibilities:
Use the JavaScript that comes with MDL, though it will become toublesome on some of the components.
Implement JS on your own per component, and use ideas of the JS internally in MDL.
I used 2. This is why I have written a ember-addon specifically to create ember components out of MDL.
It's pretty simple.
ember install ember-mdl
Demo / docs: http://peec.github.io/ember-mdl/
Example of implementation is in the dummy app
Or you can just do componentHandler.upgradeDom() on didInsertElement. Which based on their documentation
Searches existing DOM for elements of our component type and upgrades
them * if they have not already been upgraded.
initializeItems: function () {
componentHandler.upgradeDom();
}.on('didInsertElement')
Thanks #torazaburo for your suggestation. I had to modify mixin to get it working. In my case i have textfield input and needed to modify the mixing. Here is my solution if someone still needs.
// app/mixins/textfield-support.js
import Ember from 'ember';
export default Ember.Mixin.create({
initializeMdlTextfield: function() {
componentHandler.upgradeElement(this.get('element'), 'MaterialTextfield');
}.on('didInsertElement')
});
Then we can extend the mixing in our component as below.
// app/components/mdl-textfield-input.js
import Ember from 'ember';
import layout from '../templates/components/mdl-textfield-input';
import mdlTextfield from '../mixins/textfield-support';
export default Ember.Component.extend(mdlTextfield, {
tagName : 'div',
attributeBindings : ['disabled', 'type', 'name' ],
hasFloatingLabel : false,
containerClassNames : '',
labelText : null,
classNames : ['mdl-textfield', 'mdl-js-textfield'],
classNameBindings: [
'hasFloatingLabel:mdl-textfield--floating-label',
'containerClassNames'
],
layout
});
Component template would look something like this.
// app/templates/components/mdl-textfield-input.hbs
{{yield}}
{{input id=name value=value type=type disabled=disable classNames="mdl-textfield__input"}}
<label class="mdl-textfield__label" for={{name}}>{{labelText}}</label>
<span class="mdl-textfield__error">{{error}}</span>
And use this component as below.
{{mdl-textfield-input
name='username'
value=model.username
labelText='Username'
hasFloatingLabel=true
type='text'
containerClassNames ='mdl-cell--12-col'
}}