I'm using ASP.NET Boilerplate. I want to navigate to Home page when I click on Application logo. But I cannot find any method to change its click behavior.
topbar.component.html
<a class="navbar-brand" asp-controller="Home" asp-action="Index"><i class="fa fa-cubes"></i> Application Name</a>
I want a similar behavior like when you click on side menu items.
sidebar-nav.component.ts
new MenuItem(this.l("HomePage"), "", "home", "/app/home")
asp-controller and asp-action are Tag Helpers in ASP.NET Core.
For an Angular component, use the routerLink attribute:
<a routerLink="/app/home" class="navbar-brand"><i class="fa fa-cubes"></i> Application Name</a>
Related
I'm learning HTML.
I've following code piece:
<a href="#B" id="specialClass" class="primary-btn icon-cart" data-one="#A" data-five="google.com" data-ten="#C" target="_blank">
<span id="pressButton">New Button</span>
</a>
When I press button based on slider and data-five gets triggered, I for some reason open in a new tab mywebsite.com/google.com instead of google.com.
What am I doing wrong?
If it is an address outside your web page you have to put the full path with https://google.es
<a target="_blank" href="https://google.es">Google</a>
I am using the code below to open a new tab upon clicking a bootstrap button in a razor .cshtml page currently. I have a button in the new tab opened which returns to the main menu, but I would like to know how to close this tab, to effectively return to where the user was previously.
<ul class="nav nav-sidebar">
<!-- Menu Item -->
<li class="menuItem">
<a asp-controller="New Tab Section Menu" asp-action="Index" target="_blank" class="menuItemLabel">
<i class="fas fa-book-reader fa-lg" style="padding-right: 5px"></i>
New Section Menu
</a>
</li>
You can't close browser tabs this simple.
I assume that you have a return button. What you can use target="_self" instead of target="_blank" so no tab will open and you can navigate back.
You could use window.close() in Javascript before, but this is mostly unavailable EXCEPT when you open a new tab with target="_blank" or by script.
In your case it might be worth a try.
Use a button with:
Return to base!
Browsers are very picky about this for security and useability reasons.
https://stackoverflow.com/a/66688958/6803592
Using link for open another page outside of project
<div class="info-line">
<mat-icon class="s-20 ml-2">
language
</mat-icon>
<a class="h3" href="https://www.google.kz/">
Web Page
</a>
</div>
but when click to link, opened this page: http://localhost:4200/google.kz - local page, not "google.kz"
How to make, open google.kz outsite link, not trying to find in local page?
You can use target="blank" as follows.
<a class="h3" href="https://www.google.kz/" target="_blank">
target
Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
_blank: usually a new tab, but users can configure browsers to open a new window instead.
It should work the way you've described it, but another way of doing it is using the document.location api.
Example:
<div class="info-line">
<mat-icon class="s-20 ml-2">
language
</mat-icon>
<a class="h3" (click)="navigate()">
Web Page
</a>
</div>
inside your component:
navigate(){
document.location = "https://www.google.kz/"
}
I have a page in that I have a table. There is one column named "Actions".
Action-menu is shown with Edit and Delete, once the user clicks on the action-column in any row. I redirect to another html page once the user clicks on edit.
Everything is working fine. But the menu does not disappear after redirecting to another page. If I go back and again click on a action-column, a new menu with edit and delete appears.
<p-dataTable #dataTable>
<p-column field="" header="{{l('Actions')}}" [sortable]="false" [style]="{'width':'25px'}">
<ng-template let-record="rowData" pTemplate="body">
<div class="btn-group dropdown" normalizePosition>
<button class="dropdown-toggle btn btn-xs btn-primary blue"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-cog"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a (click)="onEditClick(record, $event)">{{ l('Edit') }}</a>
</li>
<li>
<a (click)="onDeleteClick(record, $event)">{{ l('Delete') }}</a>
</li>
</ul>
</div>
</ng-template>
</p-column>
</p-dataTable>
onEditClick(selectedValue: any): void {
this.router.navigate(['/app/xyz/pqr', selectedClassification.id]);
}
You are mixing angular with plain bootstrap JavaScript. Every time your DropDown gets clicked, the bootstrap-JavaScript creates the menu somewhere at the bottom of your html markup.
angular-router only updates the markup inside of your router-outlet, so the attached menu markup will not be removed on navigate.
Try to use a angular specific bootstrap version like this:
https://ng-bootstrap.github.io/#/components/dropdown/examples
They should already implemented a solution of your problem, and it will avoid more upcomming issues ;-)
I am trying to navigate between two pages in angularJS using href. Both pages have accordions and they aren't loading properly when I navigate from one page to another. The accordion work fine when I refresh the page or when I directly go to the page (without navigating from another page).
Here is my code:
<a href= "{{domainName}}/#/Reports/Reports?subscriptionID={{subscription.SubscriptionID}}">
<div class="pull-right btn btn-xs btn-primary" id="btnEditSubscription">
<i class="fa fa-pencil" aria-hidden="true"></i> Edit Subscription
</div>
</a>
So I want to go to Reports page from this button click. Reports page has accordion. This is how the accordion in Reports page looks when navigating after the button click:
This is how the accordion should look like:
It looks like when navigating between pages I am missing .ui-accordion class.
Please help!!
Thank you