app.routing.ts
{ path:'dashboard/:name', component:DashboardComponent}
<a [routerLinkActive]="['active']" routerLink="/dashboard/{{selectedPlatform}}"><i class="fa fa-tachometer" aria-hidden="true" ></i><span>Dashboard</span></a>
For navigation, active class added properly for the route "/dashboard/cps", but when i reload the page active class not added.This issue comes only for the dynamic values. Can anyone please help me on this issue?
Thanks in advance
Related
On an angular 12 application, I use a quite ordinary a with a routerLink.
First, I don't know why, it always refreshes my page... it relocates the whole page with each click.
Also, when I set the routerLink to "null", my link is still active. My href is set with the current page.
I've done the same thing in several applications and I don't get this behavior.
Anyone have any idea why it behaves like this?
Here is my html code for the link :
<ng-container *ngFor="let el of sidebarMenu">
<a class="sidebar-menu-item" [routerLink]="el.route">
<mat-icon fontSet="material-icons-round">{{ el.icon }}</mat-icon>
<span>{{ el.label }}</span>
</a>
</ng-container>
If I write "null", my link remains active on the current page.
Thanking you.
Translated with www.DeepL.com/Translator (free version)
I don't know why, but the code works if it's not dynamically generated...
The problem is fixed without the loop on the elements.
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>
How can I create a button in thymeleaf to act as a link and opens in a new tab with some given parameters?
I tried this one but now works:
<button th:onclick="window.open('https://www.google.com/location/' + ${id})"> GO</button>
It does not work when I'm using variables (${id})
If you aren't using bootstrap, I would represent the button like this.
<button
th:data-url="#{https://www.google.com/location/{id}(id=${id})}"
onclick="window.open(this.getAttribute('data-url'))">GO</button>
Note: I'm using onclick and not th:onclick.
If you are using bootstrap, you can style the link as a button as in the other answer, and just use th:href.
<a class="btn" th:href="#{https://www.google.com/location/{id}(id=${id})}" target="_blank">GO</a>
You can try like below. bootstrap will help your anchor tag look like a button.
<a class="btn" th:href="#{/url/{id}(id=${id})}" target="_blank">GO</a>
I have two sections of html in my main (app.component.html) view - one for navigation bar of buttons which navigates to child pages and the other section is to display a table of records. When select a record of the table I expect the details page of the record should display in the router-outlet but the table should be disappeared. But the details page is displaying down the table while I expect the table of records should disappear when the app is routed to a child page (details page). Any help how to achieve this would be appreciated.
here is my code:
<div class="navbar bg-inverse">
<div class="container">
Home
<a routerLink="/general" routerLinkActive="active" class="navbar-brand">General</a>
<a routerLink="/financial" routerLinkActive="active" class="navbar-brand">Financial</a>
<a routerLink="/termsheet" routerLinkActive="active" class="navbar-brand">Term Sheet</a>
<a routerLink="/capitalization" routerLinkActive="active" class="navbar-brand">Capitalization</a>
</div>
</div>
<!--I don't want below section of the main displaying when routed to child page
<h1>table of records here</h1>
<router-outlet></router-outlet>
Thanks
yesp.
Your idea of putting the table section in a separate component looks working, but the pagination logic which is moved from app.component.ts to dashboard.ts was broke and a click on next page (goes to next page but immediately within a second it's coming back to page 1 agian) is not working now. Anyway i will look into the pagination issue and get back to the board in case the issue persists. Thanks for your help!
Thanks
yesp
I have a bootstrap tabbed component on my page. I am trying to control which tab is active upon reload of the page. But, on initial load the behavior of the tab is very peculiar. Here is the code:
<li #(Model.tab == 1 ? "class=tab-pane active" : "class=tab-pane" id="tab1"><l1>
what it is showing in the markup and it is not working is (notice the active out outside the quotes
<li class="tab-pane" active id="tab1"><l1>
the behavior only happens on inital load, but it the tabs are pressed, the behavior is normal, but the extra "active" remains. I am confused where the active outside the quotes is coming from?
The problem is your output doesn't render the double quotes so it looks like this, where the active class doesn't get attached to anything but the browser will just see it as a standalone attribute:
<li class=tab-pane active id="tab1"><l1>
Instead try this:
<li class="#(Model.tab == 1 ? "tab-pane active" : "class=tab-pane")" id="tab1"><l1>