I am working on an angular application. I have following code in my html
<div>{{ data.date | date:'d-MMM-y' || '-' }}</div>
<div>{{ data.id || '-' }}</div>
The problem I am facing is, whenever for any field like date and id, if value coming from API is null then next div shifts upward. I want div to be in that particular place it is when value is not null. So, I want to have a dash "-" whenever a value coming from API is null. So in my code I added a || '-' to all the fields but still it is not working. I am not getting "-" in my html. How can I do that?
You were close to the result, you are just missing some parentheses:
<div>{{ (data?.date) ? (data.date | date:'d-MMM-y') : '-' }}</div>
Working Stackblitz: https://stackblitz.com/edit/angular-vb4peg?file=src/app/app.component.ts
Just comment the line this.data["date"] = new Date(); and you will see how it changes.
You can use on this case the nullish coalescing operator
it will be like:
<div> {{ (data.date | date:'d-MMM-y') ?? '-' }} </div>
<div> {{ data.id ?? '-' }} </div>
Related
If the drop down has only one value, then I need to show that value as default value in drop down.
Eg: If "Fruits" drop down has only 1 value, then I need to show that value as default value
<div *ngIf='items.length>0'>
<span *ngIf= "isAllFruitsSelected; else Fruitname">{{'ALL'}}</span>
<ng-template #Fruitname>
{{this.form.value.selectedFruits.length}} + 'Fruit Selected'}}
</ng-template>
</div>
try this:
<ng-template #Fruitname>
{{ this.form.value.selectedFruits.length = 1 ? this.form.value.selectedFruits[0]?.name : (this.form.value.selectedFruits.length + 'Fruit Selected') }}
If selectedFruits is an array of fruit names (strings), you don't need the ?.name. (just this.form.value.selectedFruits[0]).
If it is an object array, you should change the attribute 'name' in *?.name for the suitable attribute for your objects.
i have an ionic 4 with angular app, im also implemented websocket in my componentA.
componentA.html:
<div *ngFor="let item of myList">
<div>{{ item.name }}</div>
<div>{{ calcPrice(item.price) }}</div>
<div>{{ calcDistance(item.distance) }}</div>
<div>{{ calcAge(item.age) }}</div>
<div>{{ setColor(item.color,item.name) }}</div>
</div>
here a sample of myList:
[
{...},
{...},
{...},
{...},
...
]
myList is an array and normaly contain 20 items, those items is updated with my websocket. I faceing a big performance issue when i enter the page, my app completely freeze when my list passes aproximately 8 items, so a started do to a big research and i discovery that using functions on view is a bad pratice
articles: here and here
Every function that i uses have a return and I need those function do make calculations and etc, putting this inside html will make the code dirty and hard to maintein.
what i shoud do to make this work propertly? should i use pipes for each item?
Edit:
here is one of the functions that i used in my html
calcVolum(item) {
if (
TestClass.startsWithA(item.name) &&
!this.needHelp(item.name)
) {
return (
Number(item.price.replace(this.regexPts, '')) *
Number(item.currentQuantity) *
item.age
);
} else if (this.needHelp(item.name)) {
return (
Number(item.price.replace(this.regexPts, '')) *
Number(item.currentQuantity) *
item.dolptax *
item.age
);
}
return (
Number(item.price.replace(this.regexR$, '').replace(',', '.')) *
item.currentQuantity
);
}
you set up your component so that things are run when they need to be run.
write a function like:
calculateItemValues(items) {
return items.map(i => {
return Object.assign({}, i,
{
priceCalc: this.calcPrice(i.price);
// however many else you need
}
);
});
}
call that whenever you need to (when the items change), maybe like this.calcItems = this.calculateItemValues(this.items) or inside an rxjs map statement is usually a great place, and iterate the calculated:
<div *ngFor="let item of calcItems">
<div>{{ item.name }}</div>
<div>{{ item.priceCalc }}</div>
<!-- whatever else you set -->
</div>
I have the following code where I need to make the profile.userId bold:
<p class="profile__last-login" *ngIf="profile.lastLoggedIn">
{{'intranet.profile.dashboard.lastLoggedIn' | messageBundle: profile.userId + ',' + (profile.lastLoggedIn | date: 'MM/dd/yyy h:mma') }}
</p>
When displayed on the page, it should say "User (username), last logged in on MM/dd/yyy h:mma" with the username in bold, but I'm not sure how to style the profile.userId within a binding?
You could split the text field. You do not need to keep the binding all together. However, I'm not quite sure what's happening with your pipes so this may not work. My guess is that you should simplify your pipes so that you can break up the text portion as below:
<p class="profile__last-login" *ngIf="profile.lastLoggedIn">
<b>{{'intranet.profile.dashboard.lastLoggedIn' | messageBundle: profile.userId }} </b>
, {{ (profile.lastLoggedIn | date: 'MM/dd/yyy h:mma') }}
</p>
I have this object:
this.item = {
name:"Michael",
age:18
};
I want to put on HTML
name: Michael
age: 18
<div >{{ item (name) }}</div> --??? should put name
<div>{{ item.name }}</div>
<div ">{{item (age)}}</div> --?? should put age
<div>{{ item.age}}</div>
How can I get the string name and age from the object?
Use keyValue pipe
<div *ngFor="let item of item | keyvalue">
{{item.key}}:{{item.value}}
</div>
stackblitz
You should avoid calling a function (which some suggest in comments) inside template. If you do that, that function will be called every time change detection runs. Which is bad. Almost always prefer pipes over method call inside the template.
You can try something like:
<div *ngFor="let key of item">
<div>{{key}}: {{item[key]}}</div>
</div>
Hi i'm just trying to check if {{data.name}} exist.
if not exist just dont show this..
Iterations :
<div v-if="conts.Titre || conts.keys(conts.Titre).length > 0" class="communes-contenu">
<div v-if="conts.Titre != ' '" class="communes-contenu">
<h3 v-if="conts.Titre">{{ conts.Titre }}</h3>
But nothing... just a "Cannot read property 'Titre' of null"
thx !
"Cannot read property 'Titre' of null" means that the object that holds Titre is null
=> conts must be null.
You can add an additional check for the existence of conts in the same v-if, or wrap it around.
Option 1:
<h3 v-if="conts && conts.Titre">{{ conts.Titre }}</h3>
Option 2:
<template v-if="conts">
<h3 v-if="conts.Titre">{{ conts.Titre }}</h3>
</template>