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>
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 an angular page, where, during an *ngFor loop, I want to update a variable, then write it to the HTML during each iteration of the loop.
Like so:
HTML:
<table *ngFor="let data of Dataset">
somehowRunThis(data)
<div>{{methodResult}}</div>
</table>
TS:
...
methodResult: any;
...
somehowRunThis(data): {
let a;
...
this.methodResult = a;
}
etc etc.
Is there any way this can work? Attempting to add a method that returns within the curly brackets seems to not work, and there appears to be no effective way to run arbitrary methods from the HTML in Angular.
Thank you for any assistance you can provide.
Is there any particular reason why you want to trigger this update in HTML?
Depending on your needs you can use pipe (https://angular.io/guide/pipes) or transform the data to desired format in your component.
I would say it's not a good idea to have a method with side-call effects invoked in HTML.
There are a lot of ways to do this. A general advice: sometimes we are looking for an answer in the wrong places, be open :)
Instead of forcing ngFor, just run a simple array.map on your data before sending it to the template.
displayData = this.data.map(el => this.somehowRunThis(el))
this way you'll avoid having terrible performance.
If you don't care and still want to do this thing for some reason you can make your function return it and actually call in template:
{{ myFunctionReturnsText() }}
This is a bad idea because the function calls will run on each change detection so something like Pipes/Directives will be better.
I am trying to pass a class to an include with grunt zetzer but I am not able to take it into the include.
I mean I invoque the part
{{= it.include("common/entity-slider-hero.html", {"class" : "extraclass","link" : "http://www.optionlink"}) }}
It works fine, but how do I get the option in the include?... something like
<div class="hero-slider {it.{class}} " >
Any help is appreciated
finally I found the solution the correct way was {{= it.class}}
For a TV Guide, I am trying to create a dynamic expression within an ng-repeat directive as follows:
<div ng-repeat="programme in programmes['{{channel}}-wed-jan-14']" alt="{{channel}}">
{{channel}} in my controller should evaluate to something like "eTV". The binding is working fine with the alt="{{channel}}" instance but not with the array instance. Angular simply serves up the line of code commented out. If I hardcode the "eTV" string in place of the {{channel}}, it works fine.
Am I trying to ask Angular to do what it is not designed for, or is it possibly my array handling which is dodgy?
Okay, not sure if I just asked a dumb question, but in the absence of responses, I managed to figure out a solution by writing a filter as follows:
Template:
<div ng-repeat="programme in programmes | getChannelDay:channel:dayString" alt="{{channel}}">
Controller filter:
app.filter('getChannelDay', function() {
return function(programmes, channel, dayString) {
return programmes[channel + dayString];
};
});
The issue with my initial problem
<div ng-repeat="programme in programmes['{{channel}}-wed-jan-14']" alt="{{channel}}">
is that I was trying to put {{channel}} inside the expression, but that is the format for markup.
I tried to use the following instead:
<div ng-repeat="programme in programmes['channel + daystring']" alt="{{channel}}">
but I am doing something wrong here. I am pretty sure there is a way to get this to work - if anyone knows, please comment.
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)