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
Related
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
I want to allow a user to provide a list of one-word attributes without parameter values. For example,
<container row crosscenter wrap spacearound ...>
which results in something like this in container.html
<div [ngClass]="{ 'flexDisplay': true, 'directionRow': isRow, 'directionCol': isCol, 'contentSpaceAround': isSpaceAround}" ...>
What I'm missing is how to set
#Input('row') isRow = false;
to true if 'row' was present in the container line.
Any ideas?
Thanks in advance.
Yogi
This can be handled in ngOnChanges. The value can be assigned either back to input property or to some object that will be passed to ngClass
ngOnChanges(changes: SimpleChanges) {
if ('foo' in changes) {
this.options.foo = true;
}
}
Since there's no way how inputs can become unassigned, there's no reason to provide bindings for them. #Attribute can be used instead:
constructor(#Attribute('foo') public foo: boolean|null) {
this.foo = (foo != null);
}
Using attributes for regular options isn't a good decision, design-wise. This prevents from setting them dynamically. Instead, it is always preferable to accept options input. If all options are supposed to be flags, it can be a string input that will be split and processed in ngOnChanges, like:
<container options="row crosscenter wrap spacearound">
or
<container [options]="'row crosscenter wrap spacearound'">
I think the answer to my question is to create directives for each of the "one-word" tags (attributes) I want to use.
:-)
I have a template as below:
<span *ngIf="item.status !=='E1' && item.status !=='B' && item.status !=='R'">{{item.status_desc}}</span>
As above, i have a ngIf condition there, making no sense but somehow it working. What am trying to do there is check "status in [E1, B, R]" something like that. How can i do that in the html without going to the ts file. Any idea guys?
In your HTML, you could use includes(), which returns true if the element is found:
<span *ngIf="!['E1', 'B', 'R'].includes(item.status)">{{item.status_desc}}</span>
as JB Nizet suggested.
Or you could use a function, like this:
statusList = [E1, B, R];
checkStatus(item)
{
return (statusList.indexOf(item) != -1);
}
where your HTML now should llol like this:
<span *ngif="checkStatus(item.status)">{{item.status_desc}}</span>
If you really don't want to go to your TypeScript source, you can do something like this for increased readability.
<span *ngIf="!['E1', 'B', 'R'].includes(item.status)">{{item.status_desc}}</span>
But perhaps it's wiser to make a variable on your class with the 'undesired' statuses like:
public ignoreStatus: string[] = ['E1', 'B', 'R'];
and then
<span *ngIf="!ignoreStatus.includes(item.status)">{{item.status_desc}}</span>
but then it would be even better to make a reusable method out of this in your class:
public isIgnoreStatus(item: any): boolean {
return this.ignoreStatus.includes(item.status);
}
with
<span *ngIf="!isIgnoreStatus(item.status)">{{item.status_desc}}</span>
No you cannot do that with template, what you can do is create a function that does the job for you
statuses = [E1, B, R];
checkValid(item){
return (statuses.indexOf(item) != -1);
}
then in HTML
<span *ngIf="checkValid(item.status)">{{item.status_desc}}</span>
You can create a pipe to do all this filters.
In that pipe you can write any logic to remove all unwanted elements.
It will make your code look better and understandable.
how are we going to use conditional operators on the {{#index}} variable such that we can print only the even records form the json.
{{#each options}}
if( {{#index}} % 2 == 0 ) //
{
print record
}
else
{ this is a odd record
}
{{/each}}
Logic like you're trying to do has to be in a helper function. You can't put relational operators like that directly into a handlebars template. It is designed that way on purpose. Helpers are very easy to create and use. See http://handlebarsjs.com/#helpers more more info.
FYI, a very common helper I use is an even/odd helper:
hbs.registerHelper("stripes", function(index) {
return (index % 2 === 0 ? "even" : "odd");
});
Which I use like this to get an "even" or "odd" class name put in a row:
<div class="row {{{stripes #index}}}">
... other content
</div>
I don't quite understand what you're trying to do in your example, but you could hide all the odd records with a simple CSS rule or you could put more logic into the helper.
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