Develop Reference

How to use innerHTML safely?

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.

Why more than 1 drop downs are not working in Materializecss?

I have multiple drop down menus on the single page. I am using Materializecss.com. The Error is, I am getting values of the first drop down in every dropdown menu in the whole page. Here is the code.
#if($user->is_banned != 1)
<a class='dropdown-button btn-flat' href='#' data-constrainWidth="false" data-activates='dropdownUser'><i class="material-icons left">expand_more</i> More</a>
<ul id="dropdownUser" class="dropdown-content">
<li><i class="material-icons left">insert_chart</i>BAN</li>
<li><i class="material-icons left">delete</i>Delete</li>
</ul>
#else
The Problem is, For example, If I have the list of 5 users on the same page, I am getting values of the first user in all the dropdown menus. I don't know what's wrong.
I tried to change class to ID but not working. I am a bit new to Jquery.
UPDATE: Okay, I found the error. Here is the new code that works! Thanks for Help StackOverflow!
#if($user->is_banned != 1)
<a class='dropdown-button btn-flat' href='#' data-constrainWidth="false" data-activates='dropdownUser-{{ $user->id }}'><i class="material-icons left">expand_more</i> More</a>
<ul id="dropdownUser-{{ $user->id }}" class="dropdown-content">
<li><i class="material-icons left">insert_chart</i>BAN</li>
<li><i class="material-icons left">delete</i>Delete</li>
</ul>
#else
I Updated the working code instead of deleting the question because there might be many developers looking for the same solution!

I have faced same issue working with materialize css.
I used
$('#tag_id').material_select();
while document is getting ready.

Sidebar closes when deleting element of array

I'm using mobile angular ui to open and close a sidebar. In this sidebar a user can search for persons and add or remove these from an array.
I have this repeat that shows the array of persons when clicking on the <a ...></> it closes the sidebar:
<li ng-repeat="recipient in persons.recipients">
<span class="wrapper">
<span class="imageWrap">
<span class="initials">
{{recipient.firstName.charAt(0)}}{{recipient.lastName.charAt(0)}} </span>
</span>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<span class="details">
<span class="info">
{{recipient.firstName}} {{recipient.lastName}}
<span class="persnr">{{recipient.employeeID}}</span>
</span>
</span>
</span>
</li>
The above html snippet is from a directive that is in the sidebar.
The removeRecipient($index); function looks like this:
$scope.removeRecipient = function(index) {
$scope.persons.recipients.splice(index,1);
}
The function works but closes the sidebar and I can't figure out why it does this. So each time a user removes a recipient it has to swipe the sidebar open again. How do I keep this sidebar open?
References:
mobile angular ui: http://mobileangularui.com/docs/sidebars/
SOLUTION
I solved my problem by adding $event.stopPropagation(); in the ng-click right behind the removeRecipient($index); function.

From doc, there was one line.
You can put ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarLeft'
inside the sidebar to make it close after clicking links inside them.
so may be you can use that or you can use or you can do like below.
e.stopPropagation()
for that you need to pass $event in
<i class="fa fa-trash-o" aria-hidden="true"></i>
so in code, you can write.
$scope.removeRecipient = function(index,e) {
if(e){
e.stopPropagation()
}
$scope.persons.recipients.splice(index,1);
}
I didn't used same tool, but may be this is issue.

Never show two divs at the same time

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)
}

not able to click on element from drop down list?

HTML code :
<ul class="dropdown-menu" role="menu">
<li>
<a href="#/profile">
<i class="fa fa-user"></i> My Profile </a>
</li>
<li>
<a href="#/source">
<i class="fa fa-user"></i> Source </a>
</li>
<li>
<a href="/user/logout">
<i class="fa fa-user"></i> Logout </a>
</li>
</ul>
My code :
element(by.cssContainingText('i.fa.fa-user', ' My Profile ')).click();
Problem : I am trying to click on element using class and cssContaingText but am not able to it. Please help me.
please help me

You may have solved it via the by.cssContainingText also. The problem with your current approach is that you are checking the text inside the i element, which is in your case empty:
<i class="fa fa-user"></i> My Profile
The text to check is located inside the a element:
element(by.cssContainingText('ul.dropdown-menu > li > a', 'My Profile')).click();
Alternatively, you may solve it without checking the text:
element(by.css("a[href*=profile]")).click();
Though, I would agree that "by partial link text" option is a better choice in this case.

I got the answer : I tried this code, it worked nicely.
element(by.partialLinkText('My Profile')).click();