$scope.barChartData.labels.push(moment(currentDate).format("YYYY-MM-DD") + "
$filter('translate')('To')" + moment(currentDate).add(4, 'days').format("YYYY-MM-DD"));
trying to translate "To" word
Reviewing this 2 lines, i found that you are using lib chart.js
for generating chart in angularjs app. And it create a svg based on data provided. So you need to again reload that svg in html with the same process of creating svg so that it is use translation based on language selection at that time.
Let me know if this solves the issue.
Related
I grab content from a CMS via Gatsby. Inside the markup there are placeholders which should be replaced with React elements.
So I get sth like this:
let content = '<span>Hello World [placeholder]!</span>';
and in React I want to change it to sth like this (where the markup for the tooltip comes from a React element):
let content = '<span>Hello World <div class="tooltip">Important warning</div>!</span>';
The final html with the replaced elements should be dumped into the DOM using dangerouslySetInnerHTML.
I tried using react-string-replace:
reactStringReplace(content, '[placeholder]', () => (<Tooltip />));
but it gives me an array containing a mix of strings and React elements that can't be concacenated without breaking the HTML structure.
What would be a good approach to tackle this issue? Or am I wrong using placeholders in the CMS altogether?
i found a really good npm package that provides this functionality and much more: https://interweave.dev/
I have an AngularJS application in which I am using highcharts-ng version 0.0.86. I am generating the highchart by the following code
<highchart config="highchartsNg"></highchart>
The chart gets properly generated with this dynamic id "highcharts-2i5ujpv-2"
But whenever I type $("#highcharts-2i5ujpv-2").highcharts() in the browser console, it gives me undefined.
Also, I have other charts in my app for which I am creating the chart using jQuery inside a div container and it works fine. eg
<div id="multi-chart-container"></div>
$("#multi-chart-container").highcharts(chartconfig);
I need to understand why I does it give me undefined in the first case
Thanks in advance
Highcharts creates it's own div element with dynamic id. You need to get one level higher to get the chart:
$("#highcharts-2i5ujpv-2").parent().highcharts()
Live demo: http://jsfiddle.net/BlackLabel/5eq6yhg3/
I would need to add an autocomplete chips component in our Angular 1.6 application. We are using Typescript, Webpack 2. As we are already using angular-ui-bootstrap, we do not want to introduce also angular-material in order to avoid style conflicts. However the wished result is exactly what material chips provide.
Is there a directive or component that i can use in my case? I found this library but it runs endless exceptions when I import it.
unfortunately I could find only partial solutions with bootstrap typehead, but then I would need to implement all the "chips" part, making me think of re-inventing the wheel.
Stack Newb here. I have an identical problem as yours. Here's how I resolved this:
1. Resolve the ReferenceError: error is not defined within the angular-chips library
The library you used (angular-chips) wasn't designed with typescript in mind. So, you'll first need to resolve the following error ReferenceError: error is not defined by defining it for them in the line above with var error;. This should prepare angular-chips for your webpack useage.
The second issue you'll find is how to add your typeahead-template-url with webpack in the mix. Rather than referring to a separate html file, use an inline template as referenced here: Bootstrap-UI Typeahead display more than one property in results list?.
If you're lazy like me and don't want to follow that hyperlink, use this as example:
2. Template to be added before the <chips> tag:
<script type="text/ng-template" id="yourTemplate.html">
<a tabindex="-1">
<i ng-class="'icon-'+match.model.type"></i>
<span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
</a>
</scrip>
3. Include template in your directive:
typeahead-template-url:"yourTemplate.html"
Worked like a charm for me.
I am new in angular2.I am working with angular 2 and facing issue as follows
1]I have been designed 2-3 template like email template,sms template which will take predefined data and display that data
2]I have been designed screen which contains dropdown with name like email,sms etc
email option has link to email template and same for sms.
The main thing is i want to show the selected template view as a preview of that template.Means if i select sms then the sms template will be shown in given section of the same page.(like upload image preview.)
is it possible?
Thanks ..
Yes obviously, you have to use Routuing for the same, by using routing in angular2 you will be able to
navigate throughout the pages and you can show whatever page you want to display
see also :-
https://angular.io/docs/ts/latest/guide/router.html
latest Updated to angular2 RC1 (wroth reading)
https://coryrylan.com/blog/introduction-to-angular-2-routing
Angular 2 router examples + #Routes typing support
How to use child routes in Angular 2.
I am trying to find an example of an Ext JS component query which searches for items with more than one class.
This is the standard to find a component by class:
Ext.Component.query('panel[cls~=my-cls]')
I want to do something like:
Ext.Component.query('panel[cls~=my-cls && cls~=my-other-cls]')
Anyone have an example of this?
Thanks
btw, the component might have say 10 classes, but I only want to specify 2 it should contain e.g.
cls: 'ths tht r1 c1'
find components with both 'r1 & c1'
What version of Ext JS are you referring to? 4.1.2?
You should be able to chain atribute searches (tested in Ext JS 4.1.1, no ~= operator yet):
Ext.ComponentQuery.query("panel[cls~=my-cls][cls~=my-other-cls]")