I am trying to make this property binding to work. I want to use ternary operator where conditions are interpolated strings. HTML is compiling, but the element is not showing.
<si-icon [icon]="item.isSelected ? 'element-face-{{item.faceColor}}-filled' : 'element-face-{{item.faceColor}}'"></si-icon>
Can someone point me what I am doing wrong here? Thank you!
Solution 1: In HTML
<si-icon [icon]="
item.isSelected
? 'element-face-' + item.faceColor + '-filled'
: 'element-face-' + item.faceColor">
</si-icon>
Solution 2: Get style name from component.
getIconStyle(isSelected: boolean, faceColor: string): string {
return isSelected
? `element-face-${faceColor}-filled`
: `element-face-${faceColor}`;
}
<si-icon [icon]="getIconStyle(item.isSelected, item.faceColor)">
</si-icon>
Sample Stackblitz Example
Related
In our Angular project, we use interpolation as shown below, but we also need to use this interpolated value in the [state] property. But we haev not managed so far. Any idea?
If we set id values as shown below, there is no problem.
<a routerLink="/ticket/details/" [state]="{ id: '5' }" >{{row.TicketId}}</a>
But we cannot get dynamically by obtaining row.TicketId (it is obtained as label in {{row.TicketId}}) but cannot concatenate with id parameter.
<a routerLink="/ticket/details/" [state]="{ id: {{row.TicketId}} }" >{{row.TicketId}}</a>
The brackets in [state]="..." tell Angular to evaluate the template expression, so you cant use interpolation there. So, as I said in comment it should be:
[state]="{ id: row.TicketId }"
Try [state]="{ id: row.TicketId }"
Here is the logic: On enter, execute the following if statement
if (!elementB.isOpen){
elementB.open()
else {
elementC.open()
elementC.focus()
elementB.close()
}
I want to use the ? conditional operator and add it after (keyup.enter):
<mat-form-field (keyup.enter)="!elementB.isOpen ? elementB.open() : elementC.open();elementC.focus();elementB.close()">
However the code above gave me an error. It seems like I cannot execute multiple lines of code with conditional operator( ? : ).
Can anyone help me with this? Thanks!
Use the component file rather than stuffing the template full of logic:
<mat-form-field (keyup.enter)="elementActions()">
In your component:
public elementActions(): void {
if (!this.elementB.isOpen) {
elementB.open();
} else {
this.elementC.open();
this.elementC.focus();
this.elementB.close();
}
}
I know it's terribly mundane, but that's what the component.ts file should really be used for.
try to give else in a method,so that you can simplify the logic
<mat-form-field (keyup.enter)="!elementB.isOpen ? elementB.open() : changeElement(elementC,elementB)">
changeElement(elementC: any, elemenB: any) :void {
elementC.open();
elementC.focus();
elementB.close();
}
Wrap it around brackets
<mat-form-field (keyup.enter)="!elementB.isOpen ? (elementB.open()) : (elementC.open(),elementC.focus(),elementB.close())">
currently my div looks like this:
<div class="class-a" [ngClass]="{'class-b': !person.something}">
now I want to have another condition...
so now I want this div to be of class-a If something class-b If something else class-c
how should I do this?
im using angular 4.
thanks!
Add it like properties to an object literal:
[ngClass]="{'class-b': !person.something, 'other-condition': isOther }"
Another option is to return a string from the component if you think you need more complex logic, or know there will only be one. This might be more testable.
Whatever string you return will be rendered as a class(es)
[ngClass]="renderClass()"
renderClass() {
switch(this.user.theme){
case "dark":
return "dark-theme"
case "light":
return "light-theme"
}
}
The better way for use this Syntax ngStyle Because,
it's Not Completed Answer.
If you want to toggle some classes like text-info Or text-danger for <i> tag (
some exp ? 'text-info' : 'text-danger'
).
The best answer is array not object.
[ngClass] = "[some exp ? 'text-info' : 'text-danger', ...]"
GoodLuck
I want to know how to use the attribute rendered in PrimeFaces.
Does this piece of code make any sense:
rendered="#{bean.user 1} and #{bean.user 2}"
The rendered attribute only accepts boolean values. It defines if a component will be created in your page DOM. If you set a component as rendered="false", it will not be visible in your website.
And answering your question: that piece of code only makes sense if user1 and user2 are boolean variables in your bean. Also, don't forget the getters and setters for those variables.
Rendered attribute can only accepts Boolean value, or if you use EL expression, it's expression must evaluate to Boolean value like
#{mBean.isTrue} , #{mBean.valueOne eq 1} , #{mBean.valueOne == 1} , #{mBean.stringValue == 'String'} , etc.
Hope it's help.
i have several strings that look like this:
contactBtn, programBtn, cartBtn.
How can i split these strings so that the "btn" gets discarted, so i keep contact, program, cart.
How would i achieve this?
The String class has a replace method:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/String.html
Check out the Replace() Section of the ActionScript 3.0 Documentation.
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/String.html#match%28%29
var yourString:String = “contactBtn”
yourString= yourString.split(“Btn”).join(“”);
trace(yourString);
// Output : yourString = "contact"
You would just have to iterate through all of your buttons.
You can also use RegExp :
trace(/.+(?=btn$)/gi.exec("foobtn"));//foo
trace(/.+(?=btn$)/gi.exec("fooBTN"));//foo
trace(/.+(?=btn$)/gi.exec("barbtn"));//bar
trace(/.+(?=btn$)/gi.exec("bar"));//null