I have an external blazor component with 2 attributes like below. I am resolving through a function by passing the value of Href attribute.
<ComponentLink Href="bookings" Active=#GetCurrentLink("bookings")>
1my question is there any way to reference or bind the value of attribute value directly from another attribute without passing through a variable.
Basically something like
<ComponentLink Href="bookings" Active=#GetCurrentLink(#Href)>
I am asking this because it is within link list for a navigation and i dont want to create a fiel or property for each Href element. I can fix it on the ComponentLink source code possibly but I don't have source code access as it is in nuget package.
I have tried using #ref but It also doesnt help as intented.
There is no easy way to achieve this.
You can look at the component definition in the same way as the class constructors. You will have the same problem when you want to pass the same value there.
The best option, in this case, is to extract the text in the variable and reuse it.
You can also define your links in your C# code as an array and just enumerate the links to render the ComponentLink components dynamically.
Here is an example of this approach: https://blazorrepl.telerik.com/wmFYwAvG39LqBZFb06
The option with the #ref is not working, because the #ref value is populated once the component is rendered and typically, you will need to evaluate the Active value before that.
Related
I have a form in a razor page where im implementing clientside validation using jquery, jquery unobtrusive and jquery validation alongside dataannotaions to validate the model.
Using strongly typed textboxes i get the data-val attributes that i need for displaying errors using ValidationMessage() method.
HOWEVER when i use the loosely typed textbox the data-val attributes does not get generated, why is this?
it is important that it works for Html.Textbox() since im using a more complex data structure and need to define specifik names for each element in the list.
loosly typed textbox and validationMessage:
Generated html:
Strongly typed textbox and validationMessage:
Generated html:
we can clearly see the data-val attributes here
The name field is built up like this (where key is a guid uniqe to each item in the list):
how come the data-val attributes don't appear with loosly typed textboxes?
I think i know the answer, since it is strongly typed we have information about the dataannotation in the model, whereas the loosley type just generates html from a name.
I'm working on a website where I want to add the settings of my Slick Slider trough the data-attribute. This is possible with the 'data-slick' attribute. The format for this looks like this: data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'.
In my WordPress CMS I'm using the plugin 'Data Attributes' to add data attributes to a Gutenberg Block. Trough this plugin all double and single quotes are converted to and therefor changes on the frontend to data-slick="{"slidesToShow": 4, "slidesToScroll": 4}"
This is not working. The Slick Slider doesn't use these settings.
Is there another way to add a JSON object into a data-attribute so it will work with the Slick Slider?
Thanks already for your help!
Kind Regards,
Nick
I think storing a JSON value in HTML is a bad idea. There are too many conditions which you have to take into consideration - backend returning page, WEB server encoding (it can add a custom encoding header), and browser compatibility. For this task, I'd prefer 2 ways: bitwise mask or simple function-for example, define a few data attributes -data-s1, data-s2, data-sn. In the JS code, add an array [ data-s1, data-s2, data-sn]. And finally, add a loop with an in-condition (if data.contains(element of array) - read and then parse the data inside of the attribute). I never worked with wordpress but for JS it is a easy task. If you need example write comment below. I can update my answer
Is there a way to take a service that connects to an Appery database and map it to an HTML page component or a variable?
I have successfully set up a service that connects to my Appery.io database and I'm mapping it to a page.
I can get content into Text and Image components, but mapping a string to the HTML component doesn't seem to work, nor does mapping a string to a variable set up on that page (typed as a string). I tried mapping the $[i] object to the HTML object as well, but that didn't seem to change anything.
I tried mapping a couple different columns to the variable and the HTML component and even the ones that successfully map to other components don't result in any content showing on the page. As a way of trying to see what was going on, I used the "log value to console" transformation and nothing shows up in the console for the variable or HTML component.
The basic mapping won't work for that purpose, so please use the following workaround:
Please add two custom includes (SafeHtml and DomSanitizer) and define variables, based on them:
On the HTML component add the property [innerHtml]:
[innerHtml]=value
Set the value to that variable with the custom code:
this.value = this.sanitizer.bypassSecurityTrustHtml('appery.io');
Does anyone know why you can use [id] and you must use [attr.contenteditable] as property binding in Angular?
I have researched for some time and I can't find an answer.
Why some html native attributes can be modified just with its name while others need to be modified through the attr property?
(This answer assumes you're binding to a HTMLElement rather than an in-app model object. Given the [attr.{name}]-syntax is only supported for DOM HTMLElement objects this assumption should stand)
When working with the DOM, the DOM interfaces for certain elements define first-class/native properties (as in JavaScript properties) for certain HTML attributes.
For example, the HTMLElement DOM interface defines a first-class property id, which is why you can directly use it in a binding expression: [id]. Similarly the HTMLAnchorElement exposes the href property.
(I note that contenteditable is a a defined DOM interface property in WHATWG HTML LS, but not the W3C's DOM specs, interesting...)
However, arbitrary (ultra-modern, user-defined, and obsolete) HTML attributes are not exposed through DOM interfaces and so can can only be accessed via the attributes collection in the DOM. Angular requires you to use [attr.{name}] for non-DOM-property attributes so that it knows it has to use the attributes collection instead of assuming it can bind directly to a DOM property.
To answer your question more directly:
when use [name] vs [attr.name]?
Follow this flow-chart:
Is the value I'm after exposed as a DOM interface property?
Yes:
Use [propertyName]
No:
Is the value I'm after a HTML attribute without a corresponding DOM interface property?
Yes: Use [attr.{attributeName}]
No: Quit your job and let someone else deal with the emotional and mental stresses of the fast-moving JavaScript developer ecosystem.
From the docs
Though the target name is usually the name of a property, there is an automatic attribute-to-property mapping in Angular for several common attributes. These include class/className, innerHtml/innerHTML, and tabindex/tabIndex.
So not all attributes are mapped within Angular.
Using the attr. prefix will literally emit the suffix as a string attribute.
Take this example:
<div [attr.data-my-attr]="value"></div>
Will produce the following HTML, assuming that the component property value has a value of 5:
<div data-my-attr="5">
</div>
Why you must use [attr.contenteditable]="editable"?
This isn't true. This is one way of emitting the contenteditable="true" attribute. Another is to use the Angular attribute [contentEditable]="editable", assuming some component property editable exists.
<div [contentEditable]="editable"></div>
DEMO: https://stackblitz.com/edit/angular-ujd5cf
The reason is because most common HTML attributes have special #Input properties in angular itself. E.g. id class etc, but there are way too many attributes to have this for each of them, so those more specific require you to use attr. syntax. The same thing happens with shorthand binding e.g. [style.width.px], you cannot do this with every single property. Event bindings have similar behavior. E.g. you can say (keyup.enter) but not (keyup.j). Angular tries to make your life easier when it can with most common things, but it also provides option to do other things as well.
This also means that you can do e.g. [attr.id]=
I have a html page where I'm loading my directive
<kms-dir1></kms-dir1>
in that component 'kmsdir1.html' is loaded i.e templateUrl, I have defined everything and working fine, now I have a requirement to use one more directive (let's say kmsdir2) in that kmsdir1.html
In that kmsdir1 component I have specified directives and tried but it's not loading
So currently I have defined another directive also in parent page and using input and output params and making its visibility hidden and show.
Is there any alternative???? i.e to load a directive inside one more directive
FYI: I didn't see any error in console. Page itself is not getting loaded (Blank)
I would see two potential issues:
You don't define directives into the directives property of the component where you want to use them
The selectors you specify don't match any element in your component.
I was missing "#Injectable()" to the component which I wanted to use it as directive.. and my bad I was use *ng-If instead *ngIf :-p
I understood whenever page is getting completely blank and no error in console then there is error in your angular syntax.