In an angular HTML template, I am trying to pass the function name dynamically as the value of
(click) = "{{dynamicFunc Name}}"
but it is giving interpolation error.
Is there any way if we can make it work?
No, this syntax is incorrect. In Angular templates, you can bind to component properties or methods using the following syntax:
<button (click)="dynamicFuncName()">Click me</button>
You cannot use interpolation syntax {{}} inside the event binding syntax ().
You can use a function inside the interpolation without (click) directive like below. But I don't advise it. İnstead of it, check about Angular Pipe.
<div>{{dynamicFuncName()}}</div>
If you wish dynamic functions name on element. Follow this code:
<button (click)="this[dynamicFuncNamesArray[0]]()">Click me</button>
dynamicFuncNamesArray = ['dynamicFuncName'];
dynamicFuncName() {
console.log('dynamicFunc');
}
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>
Im having a little trouble with a Custom HTML Element when using it inside Angular.
When adding the custom html element like this:
<custom-element *ngIf="something == false"
application-name="CUSTOM_NAME"
another-attribute="SOME_LINK">
</custom-element>
I can see the element in the DOM just fine, and it has 2 attributes:
application-name and another-attribute
However, if I add another attribute called on-accept, I assume, that the third attribute is turned into an event, as I cannot see all 3 attributes in the DOM.
<custom-element *ngIf="something == false"
application-name="CUSTOM_NAME"
another-attribute="SOME_LINK"
on-accept="SOME_EVENT">
</custom-element>
when doing an ng-serve, it gives me this Error:
ERROR in src/app/components/main/main.component.html:5:118 - error TS2339: Property 'SOME_EVENT'
does not exist on type 'MainComponent'.
5 <custom-element *ngIf="something == false" application-name="CUSTOM_NAME" policy-link="SOME_LINK"
on-accept="SOME_EVENT" ></custom-element>
When I rename on-accept to onAccept it works just fine.
Note: I want to decouple my custom HTML element from Angular completely as I would also like to use it in other apps aswell. And I want to use an attribute called on-accept, but apparently i cannot use custom attribute on-accept on my custom element, when inside an Angular app...
This makes it non-reusable.
If I use my custom element in some plain HTML file, I get expected bahaviour, and it shows me an element with 3 custom attributes:
application-name, another-attribute and on-accept
Why can I not use an attribute called on-accept within my Angular App?
In angular templates: on-xy="..." is like (xy)="..." , so on-accept="yourMethod()" is like (accept)="yourMethod()"
Your "SOME_EVENT" should be an existing function in your component. Try this:
MainComponent:
onAcceptEvent(evt) { console.info(evt); }
Template:
<custom-element *ngIf="something == false" on-accept="onAcceptEvent($event)" ></custom-element>
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'
}
Is it possible to give angular expression inside a JSON file like this:
{
"headerHTML": "<div>{{clippedCoupons}}</div>"
}
And bind it to a directive template like this (the below convertAsHtml is a filter for trustAsHtml):
<header data-ng-bind-html="headerHTML|convertAsHtml">
</header>
When I bind the JSON, I'm getting {{clippedCoupons}} expression as such in the page. Is is possible to change it dynamically in our controller?
So I am using Ember.js each helper and I am having trouble putting values where I want them.
Here is what I want my html to look like.
<div id="item0">
item0Value
</div>
But I can't figure out how to write this in the handlebars template.
This is what I tried.
{{#each item in array}}
<div id="item{{item.id}}">
{{item.value}}
</div>
{{/each}}
This gives me an error.
Uncaught Error: Assertion Failed: An error occured while setting up template bindings. Please check for invalid markup or bindings within HTML comments.
Is there a way to do what I want here? or is it not possible to put values inside the html tags?
From ember/guides:
It is often useful to specify a controller to decorate individual
items in the ArrayController while iterating over them. This can be
done by creating an ObjectController:
You can use an item controller to generate the values you need, and then access them in your template:
{{#each item in array itemController="song"}}
<div {{bind-attr="item.cssId"}}>
{{item.value}}
</div>
{{/each}}
// controllers/song
App.SongController = Ember.ObjectController.extend({
cssId: function() {
return 'item' + this.get('id');
}.property('id')
...
Note: As best practice it is better to declare your itemController in the template, and not directly in your ArrayController