Not expected parametr ?zx=djlj8eui511x adding to url after clicking
<a [href]="navItem.url" *ngIf="navItem.index <= wizardConfiguration.activeTab.index"
class="rktn-wizard-navigation-container_passed-item"
[ngClass]="{'_active': navItem.index === wizardConfiguration.activeTab.index}">
{{getMessage(navItem.key)}}
</a>
Try to refer the following code to set the href attribute:
<div *ngFor="let option of navItem">
<a href="{{option.url}}?index={{option.index}}"
class="rktn-wizard-navigation-container_passed-item">
{{option.key}}
</a>
</div>
Besides, You could also rebuild the url property (add the parameter to the url property) in the component.ts file, then bind the value to the link.
Related
I need to get rel="" into this html. This is part of AEM, so I have an xml file doing this:
content.xml
<rel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="HTML attribute to apply to the component."
fieldLabel="Rel"
name="./rel"/>
I've tried just duplicating how id is handled, along with a million other things...
button.html
<button
data-sly-use.button="com.adobe.cq.wcm.core.components.models.Button"
data-sly-element="${button.buttonLink.valid ? 'a' : 'button'}"
type="${button.buttonLink.valid ? '' : 'button'}"
id="${button.id}"
rel="${button.rel}" <--THIS DOES NOT WORK
class=""
data-sly-attribute="${button.buttonLink.htmlAttributes}"
aria-label="${button.accessibilityLabel}"
data-cmp-clickable="${button.data ? true : false}"
data-cmp-data-layer="${button.data.json}">
<span data-sly-test="${button.text}" class="">${button.text}</span>
</button>
You can use the properties object with a HTL context attribute.
<button rel=${properties.rel # context='attribute} </button>
this was the answer
rel=${properties.rel}
I'm conditionally rendering a div in my React app. This...
if (props.trades.length > 0)
return <div class="header">Your trades:</div>
else
return <div class="header">You haven't made any trades.</div>
works but I want to include a link in the second option like so
if (props.trades.length > 0)
return <div class="header">Your trades:</div>
else
return <div class="header">You haven't made any trades. Click <a to={{/page}}>here</a> to make a trade.</div>
But I'm getting this error: "Parsing error: Invalid regular expression flag" at the closing a tag.
Why is this?
This happens because you should use the to this way:
Notice: if you are using the html a tag, you would probably want to change to to href
<a to="/page">here</a>
// or
const to = "/page"
...
<a to={to}>here</a>
I have this template
<ng-template #thumbnailTemplate let-context="thumbnailContext">
<div id="{{context.divId}}">
<button type="button" data-toggle="modal" (click)="showEnlargeImage(context)">
<img id="{{context.imgId}}" src="{{context.imgSrc}}"/> <!-- this will have width, height=80-->
</button>
<a *ngIf="this.isEditing" href="#" id="{{context.closeId}}" onClick="deleteThumbnailfromContainer(context)"></a>
</div>
</ng-template>
The <a> is shown dynamically depending on the value of isEditing. This part works fine. On clicking <a>, I expect that deleteThumbnailfromContainer gets called and the page doesn't redirect because deleteThumbnailfromContainer returns false. But the page gets refreshed. I also think that deleteThumbnailfromContainer is not getting called because deleteThumbnailfromContainer has an alert which doesn't pop up.
deleteThumbnailfromContainer(thumbnailContext:ThumbnailContext){
console.log("delete thumbnail clicked ");
let index = this.thumbnailContainerRef.indexOf(thumbnailContext.viewRefId);
console.log("deleting index "+index);
this.thumbnailContainerRef.remove(index);
alert();
return false;
}
The generated html looks like follows (looks alright to me).
<a _ngcontent-c9="" href="#" onclick="deleteThumbnailfromContainer(context)" id="close-button-1"></a>
I can't figure out why the code isn't working correctly here.
I think you should try this out.
<a *ngIf="this.isEditing" href="javascript:void(0)"
(click)="deleteThumbnailfromContainer(context)" id="close-button-1"></a>
I have a problem with the following code.
I need to style it with the option: datepickerMode: 'year'
It went fine in other fields i have where it is a editable text box, however this is a href that turns into editable when clicked. I have had no luck with the data-e-datepicker-options="my options in scope"
<a href="#"
editable-bsdate="target"
data-e-datepicker-popup="dd-MM-yyyy"
data-e-ng-click="open($event,'date')"
data-e-is-open="opened.date"
onbeforesave="callback($data)" >
{{ (target | date:"dd-MM-yyyy") || placeholder }}
</a>
Try this:
e-datepicker-mode="'year'"
I want to display
Username v
as the text displayed for the link.
I wanted to use <class = "caret"> but I can't pass it successfully and the HTML code is being printed next to Username.
In most cases the Html.ActionLink will do the trick, if you want more control over the href tag you can use #Url.Action.
Examples:
#Html.ActionLink(Model.Username, "Username", "Account", new { #class = "caret" })
HTML Result: <a class="caret" href="/Account/Username">SomeUsername</a>
<a class="caret" href="#Url.Action("Username", "Account")">#Model.Username</a>
HTML Result: <a class="caret" href="/Account/Username">SomeUsername</a>