When i use Angular to dynamic change div 's backgroundImage, i find there are two ways to set backgrond-image:
first:
<div style="background:url({{example_expression}})"></div>
the second:
<div ng-style="{backgroundImage: 'url({{example_expression}})'}"></div>
But when i change example_expression, only the first way can dynamically change the backgroundImage.
There is a example in Plunker
What's wrong with ngStyle?
ng-style should not contain {{}} interpolation directive, you could directly access scope variable there. Also backgroundImage should be 'background-image'
Markup
<div ng-style="{'background-image': 'url('+ example_expression+')'}"></div>
Demo Plunkr
Related
I am working on project with Angular 12 and I have an HTML response I want to display. I want to bind innerHtml of div to variable value
I use this syntax {{value}}
You should use [innerHTML] property binding to your element , like this :
<div [innerHTML]="response"></div>
I have a reference to a textarea
<*wrapper-component (submit)="tx1.value ? submit(tx1.value) : tx1.setClass('required')??">
<textarea #tx1> <textarea>
</*wrapper-component>
which I pass the value of into my submit function, is it possible to set classes for my tx1 element from the HTML itself instead of creating a ViewChild property and accessing elRef.nativeElement.setClass with typeScript?
I'd normally suggest using [ngClass] binding for setting CSS selectors dynamically. However, if you insist on using a template ref variable, you could use the setAttribute() method to set attributes, in your case 'class'.
<*wrapper-component (submit)="tx1.value ? submit(tx1.value) : tx1.setAttribute('class', 'required')">
<textarea #tx1> <textarea>
</*wrapper-component>
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}}
Am using This modal in angular2 and i would like to position the modal popup to the left this is what ive tried
<modal #categoriesmodal [cssClass]="modalchecklist">
<modal-header [show-close]="true">
<h4 class="modal-title">I'm a modal!</h4>
</modal-header>
<modal-body>
Hello World!
</modal-body>
<modal-footer [show-default-buttons]="true"></modal-footer>
</modal>
On the css class
.modalchecklist{
position:absolute;
top:0;
left:0
}
Ive tried adding //background color:red on the css class but this fails and adds the css to the background document not on the modal
Where am i going wrong on the css classes
Ive checked also on the chrome developer tools but they too dont solve the issue.
What could be wrong
To apply a style attribute in Angular2 you can use the [style] directive, like this
<what-ever [style.backgroundColor]="'red'">I am red</what-ever>
To apply a class, use ngClass:
<what-ever [ngClass]="'first'"><what-ever>
<what-ever [ngClass]="['first', 'second']"></what-ever>
<what-ever [ngClass]="{'first':true, 'second':conditionExp}"><what-ever>
See the ngClass link above for multiple syntax options and using expressions.
Please note all these methods are directives and, being directly bound to the scope, they expect expressions. In order to pass strings, you need to qualify your expression as string: use single-quotes inside double-quotes, and they'll be correctly evaluated as strings.
My Html Code is
<div ivh-treeview="menuPermissionObj.generalAssetManagement"
ivh-treeview-expand-to-depth="-1"
ivh-treeview-on-cb-change="changeCallback(ivhNode,ivhIsSelected, ivhTree)">
</div>
i used this plugin
https://github.com/iVantage/angular-ivh-treeview
is there any way to hide parent checkbox?
thanks in advance.
Yes, but you will need to use a custom node template.
See the list of supported helper methods and scope variables in your templates here: https://github.com/iVantage/angular-ivh-treeview/blob/master/docs/templates-and-skins.md#supported-template-scope-variables
Both isLeaf(node) and the depth variable will pair well with ng-show.