I'm working on a project where ng-cloak is unavailable due to the way the css files are loaded, so I'm looking for a less worse solution and have tried a few different things.
I never want to show these two icons at the same time. The problem is, the bottom one (angle right) shows up briefly since the promise for the data source is still resolving. How can I make sure these two icons will never show up at once?
<i class=" fa invalid-data-icon fa-angle-down" ng-hide="vm.hideInvalid"
ng-show="vm.data.datasources.length">
</i>
<i class="fa invalid-data-icon fa-angle-right" ng-show="vm.hideInvalid"
ng-hide="vm.data.datasources.length">
</i>
EDIT:
went with this from the accepted answer:
<i class=" fa invalid-data-icon fa-angle-down" ng-class="{'rotate-icon':vm.data.datasources[1].length==0 || vm.hideInvalid}"></i>
First using but ng-show and ng-hide in the same tag is a pretty bad idea.
You should do something like :
<i class=" fa invalid-data-icon fa-angle-down"
ng-show="vm.hideInvalid==false && vm.data.datasources.length==0">
</i>
<i class="fa invalid-data-icon fa-angle-right"
ng-show="vm.hideInvalid==true && vm.data.datasources.length==0">
</i>
Considering that as long your promise is not resvoled you would have initialize hideInvalid and datasources to undefined.
Alternative approach: Only use one icon in your code, and rotate it with a css class:
<i class=" fa invalid-data-icon fa-angle-down" ng-class={'rotate-icon':!!vm.data.datasources.length}></i>
(my Angular skills are a bit rusty, but you get the jist...)
Then in your CSS, something like this:
.rotate-icon {
transform: rotate(-90deg)
}
Related
Ok, this is my very first question posted to this forum so please be kind.. :)
I'm using ASP.NET MVC 5 and I am trying to do a two step process when an icon is clicked.
Select the correct page
Scroll down to a certain section on that page.
Here is what I got so far:
<a class="sidebar-brand d-flex align-items-center justify-content-start" >
<div class="notification-bell" style="color:red">
<i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=#ViewBag.TotalUnreadComments.ToString() onclick='scrollToElement("CommentSection");'></i>
</div>
</a>
And the Javascript
<script type='text/javascript'>
function scrollToElement(id) {
// Set correct page
window.location.replace("/TodoListDashboard");
//Get target
var target = document.getElementById(id).offsetTop;
//Scrolls to that target location
window.scrollTo(0, target);
}
</script>
The funny thing is that either of these actions work by themselves but they won't work together.
Any ideas would be greatly appreciated!!!
Ok, I feel kind of foolish but I figured out an easy fix...
For this problem, I just created a javascript function and added both items together like this:
<script type='text/javascript'>
function scrollToComments() {
window.location.replace("/TodoListDashboard#CommentSection");
}
</script>
Then I just changed my onclick call to:
<i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=#ViewBag.TotalUnreadComments.ToString() onclick='scrollToComments();'></i>
Instead of retyping repeated codes for a side bar in Javascript, I made a sidebar function which is used to populate similar codes for every pages. it looks like this:
function addSidebarTemplate(){
const template = document.createElement('template');
template.innerHTML = `<aside class="aside-container">
<header>
link here
<a class="mr-1" href="#">
<i class="fab fa-linkedin"></i>
</a>
<a class="mr-1" href="#">
<i class="fab fa-facebook"></i>
</a>
<a class="mr-1" href="#">
<i class="fab fa-github"></i>
</a>
</header>`
document.querySelector('#sidebar').appendChild(sidebar.content);
There are other elements below this code. But none of them requires user's input. I just wonder is this safe to use innerHTML in this case? If not, is there better way to insert the side bar like this?
Thanks
If no user input is used, then innerHTML is fine to use. That being said, if you're doing a lot of this you may want to look into using a UI library like React to help you out.
I have this piece of code
<vs-option
v-for="project in projects"
:key="project.id"
:label="project.icon + project.name"
:value="project.id"
/>
it's option of select box, project.icon value is like <i class="fas fa-home"></i> (it's HTML). When I combine it with my project.name it turns out like this <i class="fas fa-home"></i> My Project
I want my icon html to show as icon but I'm not sure how to combine this two together.
:label="project.icon + project.name"
Any idea?
Trying to add a tooltip to a font awesome icon in an Angular page. The normal Bootstrap method seems to be ignored so I am trying to use the NGBootstrap method used for adding a tooltip to buttons, but the tool tip never displays. https://ng-bootstrap.github.io/#/components/tooltip/examples
The typical Bootstrap method causes an error of Cannot set property 'title' of undefined when hovering.
<i class="fa fa-info-circle" data-toggle="tooltip" title="Name here"></i>
In the component:
ngafterviewinit() {
$(function() {
$('[data-toggle="tooltip"]').tooltip();
}
};
You can also try using button tag.
<div class="infoCSSClass">
<button class="icon-info" data-container="body" ngbTooltip="Here is tooltip text" #toolTip="ngbTooltip" (click)="toolTip.open()" placement="top"></button>
</div>
This seems to work:
<i id="icon" class="fa fa-1x fa-info-circle" [ngClass]="icon" aria-hidden="true" placement="right" ngbTooltip="tipContent"></i>
I am trying to make this icon move but so far had no luck doing this. Does anyone know how I can make this icon flicker or something?
<i id="informationCommentIcon" class="icon ion-fireball assertive "></i>
<a id="informationCommentText" ng-click="promoFunction()">Promo Deal</a>