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.
Related
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 am struggling to remove the dropdown arrow next to the column names 'Name', 'Datum', 'Creator'...
The dropdown arrow gets rendered in an i-Tag, and if I edit the html via Chrome and add 'display: none' it gets removed...
however I am unable to access the i tag or the class v-icon via css in the code. Probably because it is not created before the rendering process.
Is there any other way to remove the dropdown arrow?
Thanks in advance!
Html of my table, called 'file-list':
The best way to hide the sort icon is via header-props. For example:
<v-data-table
:headers="headers"
:items="items"
:header-props="{ sortIcon: null }"
>
First, I'm pretty sure that you can access this <i> icon tag with css, because the fact that some element will get created dynamically does not preventing it to be affected by your css.
Sure your css could get overridden because of Vuetify css, according to the rules of specificity. I would suggest beginning with add a class property to the <v-data-table>, to allow you to specify the css for the tag something like that:
.my-datatable-class .datatable thead th.column.sortable i {
display: none;
}
It's different if you are using scoped style, this, and more about css specificity is covered here, thanks #Traxo
Anoter option is to implement the whole header section of the data-table by yourself, which is allowed by Vuetify using scoped-slots example of how to do it is in the examples, look for the Slot: items and headers and there at the template code you can see the <v-icon small>arrow_upward</v-icon> thing, just implement the headers omitting that, and there you go without css, adding something like that into your <v-data-table>:
<template slot="headers" slot-scope="props">
<tr>
<th
v-for="header in props.headers"
:key="header.text"
:class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
#click="changeSort(header.value)"
>
{{ header.text }}
</th>
</tr>
</template>
use sortable option false to the necessary columns
ex-:
headers: [{ text: 'Name', value: 'name', sortable: false },
{ text: 'Date', value: 'date', sortable: false }]
It is not needed to write any custom CSS. Just possible to use provided vuetify property
sort-icon
It is enough to provide the value of sort-icon as false. It will hide sorting icon of all columns, as I see it is what you need.
<v-data-table
:headers="headers"
:items="items"
:sort-icon="false"
>
I tried lots and search numbers of time but I didnt get any solution to disable click on div element. Already question has been asked but they are saying not possible on divs and I want to know only, is there any ways to disable div in angular2
<div>(click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
[class.isDisabled]="isDisabled"></div>
And the old answer not clearly about disabling divs and pointer-events:none is not supported in old version browser also it become editable from network tab
You can use css:
pointer-events:none
Or maybe could do something like:
<div (click)="false; $event.stopPropagation();"> </div>
There are several ways of preventing a click, depends on what you need
The straightforward answer here will be just not to render the function if the element should be disabled. Something like this:
<div (click)="shouldBeDisabled ? null : callYourFunctionHere()"></div>
But a better solution will be to put this condition into your function itself
HTML
<div (click)="callYourFunctionHere()"></div>
TS
const callYourFunctionHere = () => {
if (this.shouldBeDisabled) return
//if statement above is false your general logic will be rendered
}
HTML file:
<div [hidden]="isshow">
<h1>this is a</h1>
</div>
<div [hidden]="!isshow">
<h1>this is b</h1>
</div>
component.ts:
public get isshow() {
return (this._state === 'ready');
}
The state value is changed by an EventListener, and will change from "connecting" to "ready".
What I want is to show "this is a" at the beginning then change to "this is b"
when state is "ready", but looks it doesn't work.
What should I do? Thanks in advance.
Change your html to the following:
<div *ngIf="isshow">
<h1>this is a</h1>
</div>
<div *ngIf="!isshow">
<h1>this is b</h1>
</div>
You can refer to this answer to see the differences: https://stackoverflow.com/a/43034841/3329836
i think your display:none is override in your style use *ngIf instead
<div *ngIf="isshow">
Just a piece of advice here. Due to some internal shenanigans angular does with it's change detection system it's better not to use getter for binding.
Your
public get isshow() {
return (this._state === 'ready');
}
will be called everytime your component checks for changes (just put console.log there before return (this._state === 'ready'); and you'll see)
it's better to use a pipe or just put the condtion this._state === 'ready' in your binding and this way it'll be called only when this._state actually changes
The same is also true for functions bound to your fields i.e you shouldn't use them in bindings
Try to add [hidden] { display: none; } in your stylesheets (remember it should be added globally). I'm not sure why, but it's kinda look like missing in Angular or there is some problems with it. I've found some old issues about it, but they are closed long time ago, but in plunkr it helped.
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)