I am looking to include a div with ng-include="'abc.html'" into an HTML from a javascript. Please let me know how to add this as am facing issues to get the ng-include value within " ' ' ".
There are multiple ways of conditionally including partials in angular. Here are a few methods.
Use ng-show / ng-hide to show or hide the element that is included using ng-include. This only achieves a show or hide and doesnt take it out of the DOM.
Put an ng-switch on top of the ng-include div. Make changes to the variable that the switch observes and toggle the inclusion or non-inclusion using the ng-switch value.
ng-include itself takes a variable. If you dont set that variable or set it to null, then it will not show anything until you change the value of the variable to point to your partial location.
Related
I want to check if a postgresql database contains a specific value. If it is true I want to hide a HTML . Is this possible?
Can I hide elements with CSS & JS, or what should I use to hide the div?
Also, How would we add it in the Div like a NgIF statement
Thanks!
What you can do, vs what's best and the Angular way:
I assume you expect to have an AJAX call similar to:
$http.databaseAPI.get().subscribe(s => { this.hasValue == s.IsActive; });
Then, you could do a few things:
<div *ngIf="hasValue"></div>
Removes element from the DOM. Potentially very performance detrimental if overused.
<div [hidden]="!hasValue"></div>
Hides the element in the DOM.
<div [ngClass]="{'hideme': hasValue === false}"></div>
Changes the CSS based on an expression, and would require supporting CSS to hide the element.
Welcome to stackoverflow. You can get all that information from angular docs
*ngIf removes/adds the html elements from the html tree.
<div *ngIf="condition">Content to render when condition is true.</div>
I need a help...
When i am using *ngIf or *ngSwitchCase view is getting changed. Custom javascript function is not working after change. Kindly kelp me to solve this issue.
NgIf and NgSwitchCase are inserting and removing a group of elements from the DOM. If you want to hide them visually but keep the space that they are occupying, do not use them.
Instead, you can toggle visibility CSS property.
<div [style.visibility]="condition ? 'hidden' : 'visible'"></div>
Let's say I have multiple directives with the same name "parent-elem" (on each page I can have a different number of these directives - dynamic number)
<div ng-app="app">
<div parent-elem></div>
<div parent-elem></div>
<div parent-elem></div>
</div>
Is there a way to know (inside the link function) AngularJS finished render all the directives with the same name on the page?
Inside the directive link function - how do I know this directive is the last rendered?
Note: Not using a ng-repeat
You should have had written, same directive, multiple times :P
Now, that totally depends on your directive, how you make it.
It can keep the counter in a service or rootScope may be whenever it is initialized.
If you are using ng-repeat which you should in this case, you have a bool $last that can tell you if the element rendered is last or not, which you can pass to the directive via any attribute.
I have created a simple polymer element with no js that has attributes in it. When the attribute is not called it shows "null".
http://jsbin.com/wakal/1/
How do I tell the element not to show null?. If the attribute is left blank I do not want anything to show up?
Normally to use default values you need to use the script and initialize the properties there.
See http://www.polymer-project.org/docs/polymer/polymer.html#default-property-values
Alternatives are to use
{{propname?propname:'default value'}} or
{{propname||'default'}}
I would like to know how to put an angularjs model as the value for an html attribute. such as:
<div ng-controller="deviceWidth"
width={{width}}>
</div>
also, how would I do this within <style> markup? Where would I put ng-controller?
div {
width:{{width}}
}
Thanks,
Ben
You'd better do create own custom directive instead of the "static" width, and interpret the interpolation with $observe function.
Post pretty similar, involving some solutions:
String Interpolation Won't Work when Setting Attribute Values on a Custom Directive
Concerning the markup, you'd better play with ng-class, whose value comes from your controller logic.