I have the following:
<ng-template ngbTabTitle>
<span title="{{p.name}}">#{{pi+1}}</span>
<button type="..." (click)="removePackage($event, pi)">R</button>
</ng-template>
But when the user clicks the button, it redirects the user back to the root route (the home route).
In the removePackage() method, I have attempted to stop propagation using event.stopPropagation(), but that doesn't seem to have helped.
Can someone tell me how to add a button (or anything clickable) in the tab title, without re-directing the user?
Call preventDefault() on the event.
Demo
Related
I am having some issues in next.js when clicking on a navigation buttons and redirecting to a new page.
I have navigation with links like this one below:
<button key={index}>
<a
href={url}
>
{text}
</a>
</button>
For example, route where element points is /about. When I click on a button, "about" page will flash for a second or less and after that redirect to that page will happen. I cannot figure why is that happening
Thanks in advance!
you should use the built-in component of nextjs to navigate on the client side see: next/link
<Link href="/about">about<Link>
I am implementing Google One Tap in my website, however I am unable to prevent the popup from spawning immediately after the logout. I know I could manually set a cookie for that, however the official documentation suggests to add the class g_id_signout to any link or button used for the logout. In my menu I have this entry:
<li>
<a id="public-logout" class="g_id_signout" href="#logout"> <wk:text
name="public_area.logout"/></a>
</li>
but the popup still shows immediately after the logout. For reference, the "X" button on the One Tap popup triggers the cooldown regularly. Any idea?
Is the link dynamically created after Google One Tap library loaded?
If that's the case, the library cannot add correct event handler to this link.
You can try to add the click event handler by yourself with the example code below:
<li>
<a id="public-logout" onclick="google.accounts.id.disableAutoSelect(); return true;" href="#logout"> <wk:text
name="public_area.logout"/></a>
</li>
Or, you can bind the click event hander by JavaScript code.
More details at: https://developers.google.com/identity/one-tap/web/reference/js-reference#google.accounts.id.disableAutoSelect
I am using zorro antd to implement multiple tabs feature, I would like to warn my user when they have unsaved changes, and only leave the tab if the user confirms. Seems there isn't a callback before leaving the tab, (nzSelectChange) is the call back after tab changed instead of before. So how can I implement a feature like this using nz-tabset of zorro?
NzTab has a (nzClick) EventEmitter to handler the tab title click event, but it does not emit the native mouse-event, so we cannot capture the native event. But I found the nz-tab [nzTitle] property can be a TemplateRef, so we can build our tab title and handler the click event before triggering tab-set's (nzSelectChange). For Example:
<ng-template #tabTitle1>
<div (click)="beforeActivateTab(0, $event)">Tab 1</div>
</ng-template>
And, I build an online example you can visit here:
https://stackblitz.com/edit/ng-zorro-antd-start-drc5uf
I am using clarity signpost, I am using this signpost for showing multiple applications, how to close this sign post when i am click on the application.
For example I am adding three buttons in this sign post, if I click on the button this need to be close. Please check my stackblitz
To keep track of whether the signpost is open or not, and then be able to dynamically close it, you should use the de-sugarized syntax of clrIfOpen to utilize two-way binding:
<ng-template [(clrIfOpen)]="signPost">
<clr-signpost-content>
<button class="btn btn-outline" (click)="close()">Hr</button>
...
</clr-signpost-content>
</ng-template>
Here is your example with this change, working fine: https://stackblitz.com/edit/signpost-dynamic-close?file=src/app/app.component.html
So here is code to show the mdl menu. They click the edit button and then a menu appears.
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="edit-button"> edit</button>
<ul id="edit_menu" class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="edit-button">
<li>change</li>
<li>do something else</li>
</ul>
Unfortunately the drop down no longer works when the user clicks the back button to the page with the drop down. I can't seem to reinitialize MDL. If i click on a link in the menu and then hit the back button, the drop down will be left open. Any ideas?
Related issue was that turbolinks breaks the MDL stuff but this code fixes it. Unfortunately it does not fix the drop down when a user hits the back button
document.addEventListener 'turbolinks:load', ->
componentHandler.upgradeDom();
This was my workaround solution to solve the problem. It was only happening for 1 specific page so I found a unique string in the URL and then overrode the back button to do a turbolinks visit.
window.addEventListener "popstate", (e)->
if (e.target.location.pathname.indexOf('customize_board') != -1 )
Turbolinks.visit( e.target.location)
I hope that at least can help someone out so their page isn't broken.
I was experiencing the same issue. Apparently this happens only when using the back button (not the forward button). My workaround was to add a javascript file with the following content
document.addEventListener "turbolinks:load", ->
componentHandler.upgradeDom()
#addEventListener "popstate", (e)->
Turbolinks.visit(e.target.location)
This actually fixed my issue
<meta name="turbolinks-cache-control" content="no-cache">