Is there a way to remove the commas when using Currency pipe?
<div>{{balance | currency }}</div>
Output like this - $7,885,412.00
I want like this - $7885412.00
You can use Angular Inbuilt replace pipe.
<div> {{balance | currency | replace:',':''}}</div>
So, i just made a test app that worked.
generate a pipe using cli, as that will register it for you too with:
ng g p noComma
inside the no-comma.pipe.ts
replace the transform section with:
transform(value: number): string {
if (value !== undefined && value !== null) {
return value.toString().replace(/,/g, '');
} else {
return '';
}
}
then in your view,
{{ balance | currency | noComma }}
Related
I have created a form which allows the user to add additional text-inputs by clicking a button. The FormControls behind these inputs are stored in a FormArray inside of a FormGroup.
I want to provide a default value for these inputs, that is going to be submitted if they are pristine. If the user changes the value of the input, which changes it to dirty, I do not want the default value to be submitted or displayed.
I currently am displaying the inputs like this, as the placeholder attribute does exactly what I want, displaying the default name, only if the input has not been changed.
<div
formArrayName="names"
*ngFor="let server of names.controls; let i = index; trackBy:trackByFn">
<span>{{ i + 1 }}</span>
<input
type="text"
formControlName="{{i}}"
placeholder="{{defaultName}}">
</div>
To validate the names I have created the following validation function:
export function validateServerName(form: FormGroup): ValidationErrors | null {
const names: string[] = form.value[CREATE_FORM_KEY_NAMES];
for (const name of names) {
if (name.trim() === '') {
return {
invalidName: true
};
}
}
return null;
}
Here I am having trouble figuring out if the element is dirty or pristine, as form.value[key] only returns a string array, not an array of the FormControls.
I am looking for either an easier way to do what I am trying to achieve, or a way to validate the form properly.
you can check the control status using
if touched is true then its dirty
this.form.get('controlname').touched
and for pristine you can check like
this.form.get('controlname').pristine
UPDATE
for form array it will be something like
let val = this.user.get('<FormArray>') as FormArray;
console.log(val.at(index));
you can now use pristine and touched on this variable
So here is the set up:
I have simple nodejs backend (based on express and mongoose), which responds to GET request with some JSON (in the form of Object of objects).
So after I get the response, I want to render a component, for each elements of said Object of objects. If it was array, I could simply use array.map(), and render a component in the callback function. But since what I have, is Object, i can not use that.
So... Should I return and Array from the backend. If so how do I tell mongoose to return the result of model.find() in the form of array.
Or should I convert the object to array in the frontend? In this case, how would I do it without putting it through a loop of some sort?
Lastly, I tried to make it work like so:
render: function() {
//console.log('render TodoList componenr');
var items = this.state.todoItems;
return(
<ul>
{for (var item in items){
console.log(item);
}}
</ul>
);
}
To which i get this error:
Uncaught SyntaxError: embedded: Unexpected token (30:9)
28 | return(
29 | <ul>
> 30 | {for (var item in items){
| ^
31 |
32 | }}
33 | </ul>
Which is super weird, as it points to empty location?
Any ideas how could make this work?
To iterate over an object you could use Object.keys like so:
Object.keys(yourObject).map(function(key) {
return renderItem(yourObject[key]);
});
The method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
It's supported by IE >= 9, Chrome >= 5, Safari >= 5, Firefox >= 4.
You can setting the object.map function equal to a variable outside the return function and then just return that variable.
render() {
var article = this.props.article;
var articleNodes = article.map(function(article, key){
if(article.iurl == ""){
article.iurl = "basketball.jpg";
};
return(
<li key={key}>
<Image item={article}/>
<div className="post-basic-info">
<h3><a target="_blank" href={article.url}>{article.title}</a></h3>
<span><label> </label>{article.team}</span>
<p>{article.description}</p>
</div>
</li>
)
});
return(
<div>
{articleNodes}
</div>
)
}
I need to show the number of keys in a json object on a web page. So, is there a way to calculate the count directly in the angular expression?
For example,
JSON:
$scope.json = {"key1": "value1", "key2": "value2", key3: "value3"}
For this 'json', there are three keys. I want to get the count of keys directly in an angular expression without calculating it in the controller.
You would have to use a custom filter like this:
template:
{{json | numKeys}}
filter:
app.filter('numKeys', function() {
return function(json) {
var keys = Object.keys(json)
return keys.length;
}
})
Some hacky way would be to do the following:
howManyKeys = {
a: 'Do',
b: 'I',
c: 'have?',
}
If you only want to use it a few times:
This object has {{ (howManyKeys | keyValue).length }} keys
<span *ngIf="(howManyKeys | keyValue).length > 2">That's more than 2!</span>
If you only want to show it on many spots:
<span *ngFor="let howManyKeysLength of [(howManyKeys | keyValue).length]">
This object has {{howManyKeysLength}} keys.
<span *ngIf="howManyKeysLength > 2">That's more than 2!</span>
<span *ngIf="howManyKeysLength < 5">Less than 5!</span>
</span>
This can be useful when you don't want to add a service.
I'm getting started with Jinja by converting my Django templates. Let's say I have a variable that represents a dollar value. So if I want to format it to two decimal places, I would do this:
{{"%.2f" | format(my_dollar_var)}}
But what if my_dollar_var is None? In that case, I'd like to show something else (like a question mark or a dash -- but not a zero).
I use a customer Currency filter:
def Currency(value):
if(value == None):
return "???"
else:
return "${:,.2f}".format(float(value))
jinja2.filters.FILTERS['Currency'] = Currency
Then just use:
{{ PRICE | Currency }}
Hope this helps!
I am using KnockoutJS which uses a json string within the data-bind attribute to indicate binding information. I also like using HAML.
This string can quickly become quite long, for example:-
%ul#task-list.unstyled{"data-bind" => "template: { name : 'taskHierarchy', foreach : contexts.children(), afterAdd: function(elem) { $(elem).hide().slideDown() } }"}
A solution is to use the :plain filter as follows (slightly different from above):-
:plain
<div data-bind = "template: {
name: 'twoLineResourceTemplate',
foreach: resources,
afterAdd: function(elem) { $(elem).hide().slideDown() }
}">
</div>
Is there a neater way to do this using HAML constructs instead of the filter?
I have tried using the pipe character but it does not seem to work for HAML attributes.
Thanks!
I tried the pipe notation and it works for me:
%ul#task-list.unstyled{"data-bind" => |
"template: { " + |
"name : 'taskHierarchy'," + |
"foreach : contexts.children()," + |
"afterAdd: function(elem) {" + |
"$(elem).hide().slideDown()" + |
"} }"} |
You could try this post on KnockoutJS and Unobtrusive JavaScript