Develop Reference

function is not executing on li click in angular6?

I am building custom autocomplete like drop down using angular7. I have this html in my component.html
<div class="wrapper">
<div class="row mt-3">
<div class="col-6">
<input type="text" class="form-control" placeholder="text here" (keyup)="credentialsSearchFilter($event)" (blur)="hideList()" [(ngModel)]="nameDisplayModel">
</div>
</div>
<div class="row mt-2" *ngIf="records.length > 0">
<ul class="suggestion-list">
<li *ngFor="let record of records" (click)="getNameValue(record)">{{record.name}}</li>
</ul>
</div>
</div>
And in component.ts i have this code
records = [];
selectedName : string = '';
nameDisplayModel = '';
users = [
{name : 'Fahad', value :'fahad'},
{name : 'Saad', value :'saad'},
{name : 'Anus', value :'anus'},
{name : 'Hazik', value :'hazik'},
{name : 'Ahsan', value :'ahsan'},
{name : 'Sohaib', value :'sohaib'}
]
credentialsSearchFilter(event: any) {
const val = event.target.value.toLowerCase();
this.records = this.users.filter(function(d) {
return d.name.toLowerCase().indexOf(val) !== -1 || !val;
});
}
hideList(){
this.records = [];
}
getNameValue(row){
console.log('hello')
this.nameDisplayModel = row.name;
this.users.forEach(item=>{
if(item.name === row.name){
this.selectedName = row.value;
}
})
this.records = [];
console.log(this.selectedName)
}
Now i am facing 3 issues.
Issue-01
On li i want to execute getNameValue function which is not executing right now and i don't know why it's not executing.
Issue-02
in the ul below the input box when i hover on li so hover css is not applying on whole li. It only applies only the small portion of li. But i want to make hover effect on whole li element.
Issue-03
When i type anything in input so when ul displays so width of ul that shows on typing in input should be in equal width as of input box.
You can see all these 3 issues in live Stackblitz link
here

1) The blur event is executed before click
Solution: use mousedown event instead of click
2) You need to remove padding on your ul element and apply them to li element
3) You can make ul element absolutely positioned. This way it's easier to make the width of ul element to be equal width of the wrapped box with relative position.
html
<div class="autocomplete">
<input type="text" ...>
<ul *ngIf="records.length > 0" class="suggestion-list">
...
</ul>
</div>
css
.autocomplete {
position: relative;
}
.suggestion-list{
position: absolute;
top: 100%;
left: 0;
right: 0;
...
}
Forked Stackblitz

Regarding issue #1
You are never clicking on the li because you are hiding it before that. Why? Because on (blur) you are removing the array of records, and therefore the ul element is disappearing. Check this fork of your project.
You have to find your own way of preventing this from happening. The basic idea is:
If you click outside of the input field, and not in the list, hide
the list.
If you click outside of the input field, but it's in the
list, perform your action and then hide the list.
I'd solve it with some variable that flags whether the user clicked on the list or not when the input was blurred.
Regarding issue #2
That's pure CSS. You're applying the CSS effects on hover on the entire li, it's just that the ul element has padding. You can solve that removing the padding from the ul and adding it to the li, for example, but there are many other ways.
Regarding issue #3
Seems to be purely a CSS question too. I'd put them with the same parent container and give them a width of 100%, but there are dozens of ways to solve it.

Input type="text" with select functionality after clicking on Input type="text"

I have this piece of code:
input type="text" name="email" id="email" value="" placeholder="" class="txt"
This is a simple input.
What I need.
Click on this input type="text" -> a drop-down select menu with several options appears (but it is still possible to write something manually into this input type="text") -> click on any option -> one of the options is inserted into the input type="text" -> click again on the input type="text" -> the same drop-down select menu with several options appears.
Please help to do this.

This can't be done with the standard form controls alone, but you can make your own. See the comments below for explanation.
// Get references to elements used
var input = document.getElementById("selectedBrowser");
var list = document.getElementById("list");
// Get all the list items into an array
var listItems = Array.prototype.slice.call(document.querySelectorAll("#list > div"));
// Make the "drop down" list the same width as the input
list.style.width = getComputedStyle(input).width;
// Set up click handler on the input
input.addEventListener("click", function(){
list.classList.remove("hidden"); // Show the list
});
// Set up input event handler on input
input.addEventListener("input", function(){
list.classList.add("hidden"); // Hide the list
});
// Loop over the list items
listItems.forEach(function(item){
// Set up a click event handler
item.addEventListener("click", function(){
input.value = item.textContent; // Copy the value into the input
list.classList.add("hidden"); // Hide the list
});
// Set up a mouseover event handler
item.addEventListener("mouseover", function(){
item.classList.add("highlight"); // Hide the list
});
// Set up a mouseout event handler
item.addEventListener("mouseout", function(){
item.classList.remove("highlight"); // Hide the list
});
});
/* Applied to the drop down list by default to hide it and
removed when the list needs to be shown. */
.hidden {
display:none;
}
#container {
display:inline-block;
vertical-align:top;
}
/* Ensures that the input will be positioned at the top-left of its parent */
#selectedBrowser {
position:absolute;
}
#list {
position:absolute; /* Position at top-left of parent */
top:1.85em; /* But, then move down to be below the input */
border:1px solid #e0e0e0;
height:5em; /* Limit height of list */
overflow-y:scroll; /* Add vertical scroll bar when list won't fit in height */
}
#list > div {
cursor:pointer;
user-select:none;
margin:2px 0;
}
.highlight {
background-color:rgba(255, 255, 0, .5);
}
<label for="selectedBrowser">Choose a browser from this list:</label>
<div id="container">
<input id="selectedBrowser" name="browser">
<div id="list" class="hidden">
<div>Chrome</div>
<div>Firefox</div>
<div>Internet Explorer</div>
<div>Opera</div>
<div>Safari</div>
<div>Microsoft Edge</div>
</div>
</div>

HTML5 has a built-in input and a datalist that renders as a combo box. You add a list attribute to the input that matches the value of the id in the datalist. An example is shown below.
<input type="text" list="items" />
<datalist id="items">
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option>Item4</option>
</datalist>
An issue with this solution is that it is not supported by the Apple Safari browser. W3Schools has the latest compatibility info.
If compatibility is an issue, a number of jQuery or javascript solutions are out there that may solve the problem. Here is a link to a Javascript solution that may work for you.

change label css class for checkbox if checked

I have checkboxes that are hidden. I have images as the labels for the checkboxes, so that when the images are clicked the checkboxes are clicked. I am trying to make it so that the image has different opacities depending on whether the box is checked or not. Here is my css for the image label:
.checkbox-label{
opacity: .2;
}
.checkbox-label:hover{
opacity: .5;
}
.checkbox-label-after-click{
opacity: 1;
}
Here is my javascript to move the classes
<script>
$('.checkbox-label').click(function(){
var the_input = $(this).next('input');
if(the_input.checked){
$(this).addClass( "checkbox-label-after-click" );
} else {
$(this).removeClass("checkbox-label-after-click");
}
});
</script>
Basically, when someone clicks on the label, it should grab the next input, which is the checkbox, the label's classes should change. I've also tried switching the addClass and removeClass methods, which makes the class switch work on the first click, but never after.
Here is the html:
How do I get this to work?

I would do this with pure CSS, like this:
label {
cursor: pointer;
}
/* Change cursor when the label is hovered */
input[type=checkbox] {
display: none;
}
/* Hide the ugly default radio styling */
label > span {
opacity: 0.2;
}
/* Hide the checkmark by default */
input[type=checkbox]:checked + span {
opacity: 1;
color: green;
}
/* Show the checkmark when the radio is checked */
<label>
<input type="checkbox" name="obvious"><span>✓</span> I look good.</label>
<br/>
<label>
<input type="checkbox" name="obvious"><span>✓</span> Cause we've been re-styled!</label>
<br/>
<label>
<input type="checkbox" name="obvious"><span>✓</span> I've got a green checkmark if you click me.</label>
<br/>
<label>
<input type="checkbox" name="obvious"><span>✓</span> We are a family of checkmarks!</label>

You can simply use toggleClass(). Your code is not working as the_input is a jQuery object and it doesn't have checked property. You can use .get() to get underlying DOM element.
like
the_input.get(0).checked or the_input[0].checked
As per your code
$('.checkbox-label').click(function(){
$(this).toggleClass( "checkbox-label-after-click", the_input.get(0).checked ); //You can also use the_input.prop('checked')
});

Im guessing its falling down when checking its checked. You will be better off just toggling the class when you click the label
$('.checkbox-label').click(function(){
$(this).toggleClass( "checkbox-label-after-click" );
});
If you really want to check its state, you could do something like this:
$('.checkbox-label').click(function(){
var the_input = $(this).next('input');
if(the_input.prop('checked')){
$(this).addClass( "checkbox-label-after-click" );
} else {
$(this).removeClass("checkbox-label-after-click");
}
});
Use the_input.prop('checked') to see if the input is checked or not. It returns a boolean.

As the_input is a jquery object you cannot use checked property of javascript, you may use the_input[0].checked or use prop method.
Replace this:
if(the_input.checked){
With this:
if(the_input.prop('checked')){

Not able to select currently selected div

I'm close but no cigar.
I'm creating a "slide show" with accompanying text.
I'm able to select new photos and text but am missing something simple when it comes to selecting the navDiv which selects the photos/text.
I've created a jsfiddle but in essence its:
$('.sectionGraphics').hide(); // Hide the existing photos
$('.sectionNav div').click(function(){
$('.sectionGraphics:visible').hide(); // Hide current visible section
var selected = $(this).data('target'); // Show selected section
$('#slideShow > #'+selected).show();
$('#test').html(selected).attr('class','').addClass(selected); // Show accompanying text
//BUT NOW I WANT TO MAKE SELECTED NAV BOX WHITE AND CAN'T SEEM TO SELECT IT
if (selected=="aaa"){
$('#aaa').attr('class','').css("background-color","white");
}
// $('.sectionNav div > .'+selected).css('background-color','white');
}).first().click();
The jsfiddle is here: http://jsfiddle.net/MAYO/S63wy/6/
(I didn't upload the photos - but it shouldn't matter - I changed the size to give a visual clue.)
EDIT: Updated my jsfiddle to remove duplicate div names

You can use $(this) to get the currently clicked element.
I added these two lines:
$('.sectionNav div').css('background-color', '');
$(this).css('background-color', 'white');
http://jsfiddle.net/5gqAH/
The first line removes the background color from all of the div elements, and the second line adds it again to the current element.
I think your code could use a bit of tidying up though, the above is just an example and classes might work better. You have some duplicate ids.

Updated Fiddle
jQuery
$(function(){
$('.sectionGraphics').hide();
$('.sectionNav div').click(function(){
var nav=$(this);
$('.sectionGraphics:visible').hide(); // Hide current visible section
var selected = $(this).data('target'); // Show selected section
$('#slideShow > #'+selected).show();
$('#test').html(selected).attr('class','').addClass(selected); // Show accompanying text
//WANT TO MAKE SELECTED NAV BOX WHITE
$('.sectionNav div').removeClass('selected');
nav.addClass('selected');
// $('.section_header div > .'+selected).css('background-color','red');
// $('#slideNav4').css('background-color','red');
// $('.section_header div > #SN-'+selected).html("aaa");
}).first().click();
});
CSS
.on {
background-color: white
}
.aaa {
background-color: gray
}
.bbb {
background-color: red
}
.ccc {
background-color: blue
}
.box {
display:inline-block;
width:15px;
height:15px;
border:solid 1px #000000;
margin:2px;
background-color:#CCCCCC;
}
.box:hover, .box.selected {
background-color:#FFFFFF;
}

Within your click handler, $(this) will refer to the button (div) that has just been clicked.
Updated JSFiddle here (added lines 13–14 in JS, 21-23 in CSS)
Added JS:
$(".sectionNav div").removeClass("box-selected"); // remove the white from all buttons
$(this).addClass("box-selected"); // make the clicked button white
and added CSS:
.box-selected {
background-color: #FFFFFF;
}

To be honest I could not really understand the problem.
If you want to check which small red box was clicked then you can use $(this) as in
$(this).siblings().each(function(){ $(this).css('background-color','red') });
$(this).css('background-color','white');
$(this).siblings() bit puts all the backgrounds to red or whatever colour you want.
Let me know if that was not what you wanted.

How to bold label on click?

So the labels are populated from the database. Once the label is clicked, the label need to turn red and bold. when clicked on another label, the first label need to come back to original state and the new label should be activated and it needs to be bold and red. for some reason, the changeActiveStates() only works for the first 2 labels, i.e., when first label is clicked it turns red and when the second label is clicked the first label is turned black and the second label is turned red. when the third label is clicked, the second label remains red and the third one turns red. How do i fix this??
Here is the code:
<html>
<span>
<input type="hidden" name="LiabFilter" id= "idLib<%=liabkey %>" value="<%=liabkey %>" />
<div>
<label for="idLib<%=liabkey%>" id="liablabel" style="cursor: hand; padding-left: 25px; font-weight: normal"
onClick ="clearLiabFilter();
document.getElementById('idLib<%=liabkey%>').checked = true;
changeActiveStates(this);">
<%=liab.getName() %>
</br>
</label>
</div>
</span>
<style type="text/css">
.activate { font-weight: bold; color:#e40000;}
.visited{ font-weight: normal; color: #000000;}
</style>
<script>
function byId(id) {
return document.getElementById ? document.getElementById(id) : document.all[id];
}
var prevLink = "";
function changeActiveStates(ele) {
if (prevLink) byId(prevLink).className = '';
ele.className = 'activate';
prevLink = ele.id;
}
</script>
</html>

Are you averse to JQuery?
If not, this should work.
$('label').click(function() {
$('label').removeClass('activate'); /* Remove 'activate' class from all labels */
$(this).addClass('activate'); /* Add 'activate' class to clicked label
});
EDIT: Example on jsFiddle
EDIT: A little more detail as the questioner hasn't used JQuery before.
JQuery is a javscript library and so must be loaded by the browser before you can do all the nifty stuff.
Add the following between the <head></head> tags on your page:
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
(Why let google host JQuery for you?)
Then add the following, also between the tags but after the script tag given above:
$(document).ready(function() {
$('label').click(function() {
$('label').removeClass('activate'); /* Remove 'activate' class from all labels */
$(this).addClass('activate'); /* Add 'activate' class to clicked label
});
});
(What does $(document).ready() do?)

Maybe not the best of solutions, but have you considered using jQuery? It's generally not too much of a dependency , and will solve these sort of issues quite elegantly and easily for you. Plus. Cross-browser compatibility.