I want to create generic url for my menu from db
If I hard code the router link for example with the value memo then the application works
<ul>
<li *ngFor="let menu of contractMenus"><a [routerLink]="['memo']">{{ menu.facetName }}</a></li>
</ul>
However if I want to make it generic like so
<ul>
<li *ngFor="let menu of contractMenus"><a [routerLink]="['{{ menu.facetUrl }}']">{{ menu.facetName }}</a></li>
</ul>
Then I get stuck on Loading.... And nothing happens I do not understand why or how I can fix this issue.
I think the solution to your problem is quite simple.
Due to the binding with [] you don't need the string interpolation for the more generic approach ;)
If you change it, like following, it should work:
<ul>
<li *ngFor="let menu of contractMenus"><a [routerLink]="[menu.facetUrl]">
{{ menu.facetName }}</a>
</li>
</ul>
Related
I created an Angular component which has a navbar, which is created as an unformatted list. By clicking on a list element, I want to call a method from the component.ts, which changes the showed component within this component.
I am an absolute beginner to Angular and web development, so I need help to solve that.
I tried using button oncklick="methodcall()" and a href="methodcall()" in the list element, which both worked. But using a button changes the styling of my navbar icons and a link shows the function call in the uri. I don't want any of this side effects.
html:
<nav>
<ul>
<li onclick="switch('page1')">page1</li>
<li onclick="switch('page2')">page2</li>
</ul>
</nav>
component.ts:
switch(propertyName: string) {
...
}
An easy way to call the method without changing my styling or the uri would be great!
You should be able to use (click) rather than onclick.
Something like this:
<nav>
<ul>
<li (click)="switch('page1')">page1</li>
<li (click)="switch('page2')">page2</li>
</ul>
</nav>
Depending on how you are switching pages I would also consider using Angular Routing, it's incredibly powerful! Check it out.
You need to put parentheses around the event to bind it.
Template/HTML:
<li (click)="switch('page1')">page1</li>
Component.ts:
export class ClickMeComponent {
public switch(pageId: string) {
// do something
}
}
Here's the official Angular documentation about event binding:
https://angular.io/guide/template-syntax#event-binding
<nav>
<ul>
<li (click)="switch('page1')">page1</li>
<li (click)="switch('page2')">page2</li>
</ul>
</nav>
Should work, but remember that it is actually not semantically correct, also for accessibility reasons I would always use a button or anchor for clicks. The styling for your icon can be kept in its original state by CSS. I would advise to do the following
<nav>
<ul>
<li>
<button type="button" (click)="switch('page1')">
<span class="icon"></span>
<span class="label">page1</span>
</button>
</li>
<li>
<button type="button" (click)="switch('page2')">
<span class="icon"></span>
<span class="label">page2</span>
</button>
</li>
</ul>
</nav>
I'm trying to make a project fully accessible, but the screenreader reads some elements from my list multiple times.
Edit: It seems this issue only happens in google chrome
this is the source code:
<ul class="o-contact__list">
<li *ngIf="page?.result?.fields?.contactAddress">
{{ page?.result?.fields?.contactAddress }}
</li>
<li *ngIf="page?.result?.fields?.contactEmail">
{{ page?.result?.fields?.contactEmail }}
</li>
<li *ngIf="page?.result?.fields?.contactTel">
{{ page?.result?.fields?.contactTel }}
</li>
<li *ngIf="page?.result?.fields?.contactPrice">
{{ page?.result?.fields?.contactPrice }}
</li>
</ul>
And this is the HTML output:
<ul class="o-contact__list">
<!--bindings={"ng-reflect-ng-if": "mainstreet 123"}--><li>
mainstreet 123
</li>
<!--bindings={"ng-reflect-ng-if": "info#email.com"}--><li>
info#email.com
</li>
<!--bindings={"ng-reflect-ng-if": "tel.: 555 7125"}--><li>
tel.: 555 7125
</li>
<!--bindings={"ng-reflect-ng-if": "free"}--><li>
free
</li>
</ul>
For some reason the first item gets read 3 times. The 2 following items get read twice, and the last item only gets read 1 time.
I have found the problem lay in the styling.
The list-items had a ::before which cause the issue with the multiple readings. I changed it to ::after which solved the problem .
I don't know exactly why this is tho so if someone still know the answer to this I would love to hear!
I was working on a mini website project using django. I found bootstrap a while ago and started using some of their features. One that I really liked was the dropdown button.
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Blog</li>
<li>Contact me</li>
</ul>
</li>
But I was having a unexpected "error"/bug. When I click on one of those buttons it will add its href to the url.
And here comes the problem. It will add the href even if the url already contains it. How can I solve this problem and where. On django scripts or with javascript?
The Problem
It looks to me like everything is behaving as it should technically, the problem is with the href target itself.
Since you have a relative link not an absolute one, it assumes it target is relative to the page you are on.
Potential Solutions
1 - Use an absolute link in this case.
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Blog</li>
<li>Contact me</li>
</ul>
</li>
2 - Use the base tag.
This will set a root url for your website, it may cause unexpected results so check and re-check if you use this solution.
HTML Base Tag
I have two array and I want to display them in a
conversation manner using ng-repeat
assume two array are defined like this
messages_send = ["hi","good, How about you?","cool","LOL","NFW"]
messages_received = ["hey, How are you?","good, Thanks","hmmm","asdfsda"]
<ul>
<span ng-repeat="i in [0,1,2,3,4]">
<li>
messages_send[i]
</li>
<li>
messages_received[i]
</li>
</span>
</ul>
I did it that way and it wroked only problem is it messed up the conversation layout I had. Is there another way to do this I mean iterating through two arrays using ng-reapet without messing up the layout ?
Thanks
You could do some variation of this but you'll need to error check the array to make sure it has the same number of elements. I'm just using an ng-show for that error check but something like this:
<ul>
<span ng-repeat="msg in messages_send track by $index>
<li>
{{msg}}
</li>
<li>
<span ng-show='messages_received.length>=$index'>
{{messages_received[$index]}}
</span>
</li>
</span>
</ul>
I'm having trouble finding the reason why my navigation menu is not popping up when I hover over "English". The other menu pop up without problem.
http://jsfiddle.net/B6ZcG/
Can someone help me find the error?
Your hovering <li class="top"> element needs to include (wrap) the child <ul> containing all the language links. Since its pretty hard to explain how to find the error here the updated code on jsFiddle.
http://jsfiddle.net/B6ZcG/2/
You had a rouge </li> in your markup
<li class="top"><span class="trf trf-english"></span>English</li>
<ul>
Should be
<li class="top"><span class="trf trf-english"></span>English
<ul>...
FIDDLE