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.

AngularJS elements located in components are fired only after the second click

I have AngularJS (1.x) component - or actually directive to be precise,
and the elements inside this directive are get fired/worked/actioned only in the second click.
For example: a dropdown will not toggle unless you click twice.
After the second click the toggle will be on each next click.
It's like the elements are not digested in the DOM.
This is the component call:
<dropdown-custom-component-example></dropdown-custom-component-example>
This is the component html file:
<div class="dropdown">
<a class="btn pl-2" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="modal" data-target=".create-supplier">
<i class="fa icon-plus text-primary"></i>
Action
</a>
</div>
</div>

you could try to digest by your own inside your directive, after you've checked if $digest isn't alreay in progress:
if(!$scope.$$phase) $scope.$digest();
// or $apply ..
hope this solves your issue :)

Most of the time AngularJS does not respond is because something is happening outside the Angular context, in those cases it's useful to try to replicate the functionality you want with built-in AngularJS directives.
It would be useful to have access to some of the implementation of your component. However, with all the information you have provided, you can use the ngClick built-in directive:
<div class="dropdown">
<a class="btn pl-2" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="modal" data-target=".create-supplier" ng-click="yourFunctionHere(this)">
<i class="fa icon-plus text-primary"></i>
Action
</a>
</div>
</div>
AngularJS Docs - ngClick

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();

Change href based on requested view

I am trying to figure out how i can change links on a _layout.cshtml based on the requested view.
When I am on the Home/Index I want the href to be '#Unhealthy' but when im on any other page, I want it to redirect back to the home page '/Home/Index/#Unhealthy'
When on other page
<li>
<i class="fa fa-warning warning"></i>
</li>
When on Home/Index
<li>
<i class="fa fa-warning warning"></i>
</li>
How can I determine the requested view to swap this value?
*Note: I suppose if I cant do it at the server I can always change the values with javascript/jquery

use razor if your using MVC note i did this answer because you tagged MVC. If you are doing a MVC application this is by far the best way it can be done, no need for any javascript.
#if (window.location.pathname == "/"){
<li>
<i class="fa fa-warning warning"></i>
</li>
}
else{
<li>
<i class="fa fa-warning warning"></i>
</li>
}
if you did want to do it the jQuery way this would work:
Jquery:
$( document ).ready(function() {
if (window.location.pathname == "/"){
$("#Link").prop("href", "#Unhealthy")
}
else {
$("#Link").prop("href", "/Home/Index/#Unhealthy")
}
});
html:
<li>
<a id="Link" href="#"><i class="fa fa-warning warning"></i></a>
</li>

#{
var controller = ViewContext.RouteData.Values["controller"].ToString().ToLower();
var action = ViewContext.RouteData.Values["action"].ToString().ToLower();
}
<li><i class="fa fa-warning warning"></i></li>

The answer by Josh Stevens should work using MVC razor code but you could use same code on each page using #Html.ActionLink overloads
A quick search finds this link that is old syntax but concept correct
Without Testing try
#Html.ActionLink("Link Text", "Index", "Home", null, null, "Unhealthy", null, null)

JavaScript function call not triggering

Can anyone help in this one?
I have a simple link:
<a href="javascript:ShareOnFacebook()" title="Share on Facebook"
class="btn btn-facebook">
<i class="fa fa-facebook"></i> Facebook
</a>
and a simple function call:
function ShareOnFacebook() {
alert("shared");
}
And the function is just not called. I really don't know what is going on. There must be a solution but I'm not seeing it.
The debugger says:
Uncaught ReferenceError: ShareOnFacebook is not defined
UPDATE
The method is called correctly when the page is loaded for the first time. Every time I reload the page the method is not being called.

The following seems to work fine. Just make sure you define the function in a way that your HTML can see it. For example, before you use it in the HTML.
function ShareOnFacebook() {
alert('hello')
}
<a href="javascript:ShareOnFacebook()" title="Share on Facebook"
class="btn btn-facebook">
<i class="fa fa-facebook"></i> Facebook
</a>

You use the following script instead of your html.
<a onclick="ShareOnFacebook()" title="Share on Facebook" class="btn btn-facebook">
<i class="fa fa-facebook"></i> Facebook
</a>