i dont have the idea how to do it. please can you give me an idea on how to go to another view by clicking the icon on the Angular6? Thank you!
To change view in Angular(without reloading page), you need Routers.
You can wrap your icon inside an anchor tag <a> and use routerLink to define the view you want to load when a user clicks on the icon.
For example, you are building an e-commerce site where you have an icon for contacts and one for a shopping cart. You can define view for each icon like this:
<a routerLink="/contacts" routerLinkActive="active">
<mat-icon matSuffix>contacts</mat-icon>
</a>
<a routerLink="/shopping_cart" routerLinkActive="active">
<mat-icon matSuffix>shopping_cart</mat-icon>
</a>
So when the user clicks on contacts icon, contactsComponent will be loaded in your view and the URL would change to yourwebsite.com/contacts.
You can learn more about routers and material-icon.
Related
I trying to navigate from a.class1 to div.class2. But the URL is changing when the link is called. So when trying to back page, it goes back to the current page on another section.
<a RouterLink="." [fragment]="'idDiv'" class="class1"></a>
...
<div class="class2" id="idDiv"></div>
Simple add 'skipLocationChange' to your anchor tag
<a routerLink="." [fragment]="'idDiv'" class="class1" skipLocationChange></a>
You can also refer to this one: Angular 2, handle anchor links with href='#'
I am trying to develop a dropdown data toggle, that can be used to open a dropdown-menu but simultaneously allows the user to click a link.
Currently, the link can only be opened via right-click "open in new tab". However, a left-click on the link always opens the dropdown, even though the browser recognizes the target of my link properly (I can see the target url in the bottom left of my browser).
I Already tried split-buttons, but their layout is not flexible enough.
Basically, I need one button (dropdown-toggle) with two lines.
The first line is an anchor with a link name and an url.
The second line is the actual label of the button.
(Background: When the user selects a new item from the dropdown, the displayed link and button label are updated by angular.)
<div class="btn dropdown-toggle" data-toggle="dropdown">
<a href="{{someUrl}}" class="button-link">
{{link name}}
</a>
<div class="button-label">
{{label}}
</div>
</div>
<ul class="dropdown-menu">
<li ng-repeat="item in items"> item </li>
</ul>
Expected result:
* If the user clicks on the link, I would like to load the linked page.
* If the user clicks somewhere else on the button (no matter whether its first or second line), I would like to open the dropdown menu.
However, a left-click on the link always opens the dropdown,
The <a> tag needs a click handler that stops propagation of the click:
<div class="btn dropdown-toggle" data-toggle="dropdown">
<a href="{{someUrl}}" class="button-link" ng-click="$event.stopPropagation()">
{{linkName}}
</a>
<div class="button-label">
{{label}}
</div>
</div>
This will prevent the click from bubbling to the <div> element that opens the dropdown.
For more information, see
MDN Web API Reference - Event.stopPropagation()
I was doing a page with a list of sites I need to visit daily, such as exercise to learn Html, CSS. I would like to know if it is possible to create a link with a page icon that is in the upper tab of the browser (chrome).
Ex: I want to list StackOverflow on my site. So I create a link and for the icon, I want to use the image that is on the tab of the page itself, as in this:
You can use:
https://plus.google.com/_/favicon?domain=www.yourlink.com
example
<a href="">
<img src="https://plus.google.com/_/favicon?domain=www.stackoverflow.com"> Stackoverflow
</a>
If I'm correctly getting what you want, you'd need to either have a local copy or link to the sites' favicon, like so:
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" />
I am using the materialize tab that is in the page materialize tab
My goal is to add a link in the menu that go to CreateAlbum tab.
I tried href="#CreateAlbum" but it didn't work. How can I do that?
if i link
<a href="{{path('homepage')}}#CreateAlbum">
or
<a href="#CreateAlbum">
don't work and don't reload page
I have a web page that is a table of contents and the page navigation is not working. Here is the html:
<a name="top_of_page">Create Account</a>
top
When i click on the top of page link nothing happens. Am i doing something wrong? Thanks for any help in advance.
name is not the correct attribute to use. Use id instead.
<a id="top_of_page">Create Account</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
top