I am trying to setup multiple conditions in my ng-class in my app. I have something like
<div id='wrapper' ng-class="{red: !isBlue(),
highlight ? 'yellow' : 'black'}"
ng-show="test">Test</div>
JS
$scope.highlight = false;
My problem is that I got syntax error on the ng-class condition.
Syntax Error: Token ';' is unexpected, expecting [}] at column 48...
I am not sure how to fix it. Can anyone help me about it? Thanks!
you can use multiple classes like this, you need to add separate classes for highlight and !highlight
<div id='wrapper'
ng-class="{'red': !isBlue(), 'yellow':highlight ,'black':!highlight }"
ng-show="test">
Test
</div>
here is a Demo Plunker (ng-class)
you have another alternative ng-style with this you can achieve something like u tried,
<div id='wrapper' ng-style="{color: (highlight ? 'yellow' : 'green')}" ng-show="test">Test</div>
here is the Demo Plunker (ng-style)
Related
I've been trying to set a variable but it is not rendering on HTML. Here's a simple example:
<div *ngIf="'hello world'; let testVariable">{{testVariable}}</div>
However, the testVairable does not show up on HTML, but instead, the Elements in the inspect printed this:
I have another statement and it is rendering properly. The document variable is from the backend so this statement does not involve any variable setter:
<div *ngIf="document.story_summary " [innerHTML]="document.story_summary"></div>
I was wondering if there's any syntax that I miss?
There is an issue in your syntax. You need to put the testVariable first in your *ngIf, if not, it will always set as true. Also, ngIfElse accepts template instead of just a string, so you need to add a template to cater for your else. See the code below:
<div *ngIf="testVariable; else hello_world">{{testVariable}}</div>
<ng-template #hello_world>hello world...</ng-template>
Yes, there is an issue in your syntax your html format should be like this
<div *ngIf="testVariable; else hello_world">{{testVariable}}</div>
<ng-template #hello_world>hello world...</ng-template>
else part will be working in <ng-template>else part</ng-template>
I have given a name using the #var notation to an angular component (app-backtester-chart) created by me, but I don't understand why I don't seem to be able to reference it outside of the div it is in?
I'm clearly missing something here...
{{chartcmp.width}}
<div class="row">
<div class="col" *ngIf="thisStrategy">
{{chartcmp.width}}
<app-backtester-chart #chartcmp
[inputStrategy]="thisStrategy"
[showBenchmark]="showBenchmark">
</app-backtester-chart>
</div>
</div>
The first {{chartcmp.width}} generates an error: Cannot read property 'width' of undefined
So why does the second one inside the div works, and correctly displays the width?
From the Angular documentation (Template reference variables):
You can refer to a template reference variable anywhere in the component's template.
I can't find an explanation anywhere. Any help would be greatly appreciated.
It's beacause of the *ngIf. You can't access a template reference variable if it's not rendred.
I think it's because your *ngIf if you're doing an ngIf all div inside are not constructed as well as your variable ^^
Try this for first one
{{chartcmp === null? "" : chartcmp.width}}
I'm learning angular 4 by myself, and I want to know if is it possible to do this:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-
valuemin="0" aria-valuemax="100" style="width {{ item.percent_position}}%;">
{{ item.percent_position }}</div>
</div>
What I want to achieve is to extend the width in relation to the value thrown by {{item.percent_position}}
When I use [style]="width: {{ item.percent_position }}%;" I got this error: Uncaught Error: Quotes are not supported for evaluation!
Statement: {{item.percent_position}}%;
What I want is this:
The result I get with the code above is this:
When you use square brackets, you're binding to an expression, so you're suggested solution doesn't work, as Angular expects this to be executable JS:
[style]="width: {{ item.percent_position }}%;"
In contrast, the following should work perfectly fine:
[style.width]="item.percent_position + '%' "
If you have multiple styles to bind to, you can use ngStyle to bind to an object:
[ngStyle]="{ 'width': item.percent_position + '%' }"
In any case: If you use square brackets, make sure what is bound to it is an executable expression!
I found that style would not work, however, I could add a custom class and call that class. For example:
<div class="{{ item.className }}">
Hopefully, that helps someone who reads this page.
you can use [ngStyle] in place of style.
<div [ngStyle]="{'width':cointinerWidth}"></span>
[ngStyle]="{'background': variable}"
Like I used in case of a tag
test
and where color is a component provided variable.
I am trying to setup an ng-class in my app
I have something like this
$scope.myClass = 'class-A';
do something here…
$scope.myClass ='class-B';
do something here
$scope.myClass ='class-C';
html
<div ng-class="{myClass}"></div>
The above codes work. The problem is when I add additional one, it doesn't work anymore.
<div ng-class="{myClass, 'class-cool':openDialog}"></div>
I am getting
Token ',' is unexpected, expecting [:] at column 15 of the expression
They work if I use them separately but not together. Can anyone help me about the issue? Thanks a lot!
You can do like this. myClass will always be set since true will always be true.
<div ng-class="{myClass:true, 'class-cool':openDialog}"></div>
I have a grid where I want the first row to not display. I have the following tag to accomplish this:
<div data-bind="visible: $index">....</div>
Unfortunately, I'm not seeing style="display: none;" showing up in the tag and sure enough, the div is displaying.
By the way, I had also tried this and it didn't work either:
<div data-bind="style: { display: $index ? 'block' : 'none' }">....</div>
I must be missing something very simple. Any help here would be greatly appreciated.
$index is an observable so right now your binding is just checking if the function isn't undefined or null which results in a true ... thus you always see the first row. Change your binding to this:
<div data-bind="visible: $index() > 0">....</div>
Well, looks like the issue was a separate script that was setting an opacity of 1 for one of the classes being set in this div. So I had to add the class to the data-bind as well.