I have an object array like this
Heros=[{
heroName:"card1",
heroType:"type1",
heroHtml:"<p>card 1</p>"
},
{
heroName:"card2",
heroType:"type2",
heroHtml:"<p>card 2</p>"
}
]
and I want to display it in my html page use like this
<div *ng-for="#hero of heros" data-hero-type="hero.heroType" [inner-html]="hero.heroHtml"></div>
can see a Plunker here.
why the data-component-type cannot get right value? If this is forbidden or not recommanded, what else solution can be used to bind value to html 5 custom attribute?
That's because data-hero-type is not a div's property, but an attribute, so to make it work you have to use
[attr.data-hero-type]="hero.heroType"
See this issue for reference #5014
And you are good to go ;)
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>
In html am rendering some value in the and passing it as a input to a component like
below
<test-component
[title]= "data?.Kevin?.title"
</test-component>
Please be noted data?.Kevin?.title will give the title name.How ever, in the above, I want to render the name a bit dynamically like below
<test-component
[title]= "data?.{{name}}?.title"
</test-component>
{{name}} should render kevin and the tile value needs to be passed to the component.
Here the name is not being rendered correctly.
Any help is highly appreciated.
the solution is pretty simple: [title]= "data?.[name]?.title"
the equivalent of the first example would be: [title]= "data?.["Kevin"]?.title"
read more on https://www.w3schools.com/js/js_objects.asp see "Accessing Object Properties"
I am new to Angular and have run into a problem that seems to have a javascript work around but they aren't very elegant.
I have a model with an array property. I ngfor the list property to build some html selection options. This is all working nicely. The problem comes when I am trying to set default value...the html elements don't have a load event.
I tried numerous html elements and they don't appear to have a load event either but I certainly could be doing it wrong.
I have seen a solution to put javascript tag right after the html and I could do that but I was really looking for a more elegant way in Angular.
I saw this SO post and thought that was my answer but there is a warning given that I agree with and thus it doesn't appear to be a good solution.
Regardless I tried it just to see if it would work and I got:
Failed to execute 'setAttribute' on 'Element': '{{loadDefaults()}}' is not a valid attribute name
<span {{loadDefaults()}} ></span>
So how can I fire an AS2 function in the component to load the default values?
HTML (btw this is NOT a full page load so there is no body tag):
<tr>
<td *ngFor="let loc of locOptions;">
<span>{{loc.text}}</span>
<input type="radio" name="radiogroup" [value]="loc.value" (change)="onSelectionChange(loc.value)">
</td>
</tr>
Edit
I thought perhaps mistakenly that ngoninit would fire too soon...before the html elements are rendered.
So perhaps what is being suggested is that I add a boolean is default to the model and bind THAT as the element is rendered.
In your ngonit function set this.locOptions to your default values. The value can be changed later on in any function and the change will be reflected in the view. Hope this helps you.
You should use ngOnInit to init you data, and call retrieve your data from your component :
defaults : any;
ngOnInit {
this.defaults = loadDefaults();
}
loadDefaults() {
//get data
}
HTML :
<span>{{defaults}}</span>
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.
I got an error when i put a nested ng-show attributes for custom directive,
one attribute in the markup of the directive and the second inside the root element of the directive template.
My real scenario are complex so i will simplify it to this example:
Suppose i have my-custom-directive below which already contains ng-show:
<my-custom-directive ng-show="someValue >= 5"></my-custom-directive>
And then the template of 'my-custom-directive' look like this:
<div ng-show="options != null">My Custom Directive</div>
Those multiple ng-show together cause an error.
if i remove one of them or move the inner ng-show at least one level deeper in it's dom tree the error gone (it's happen when it's location is on the root template element).
this error tested on angular v1.4.8.
Is this angular bug? or there is a reasonable explanation for this behavior?
here is the Plunker example:
http://embed.plnkr.co/ZTZVcfc5bfmjPo9t0Isw
Thank you in advance,
Menachem
Because the directive has replace: trueit is trying to merge the two ng-show values together resulting in an error. The simplest solution I believe is to just do replace: false
Or you can inject the value via isolate scope and use a single ng-show value within the directive. I believe this is considered the cleaner solution.
Example: http://plnkr.co/edit/5oc8c1Hrz8N1F2klCio7?p=info
scope: {
someValue: '=someValue'
}