Let's say I have the following template:
<ul>
<li id="1" class="selectModal">First</li>
<li id="2" class="selectModal">Second</li>
<li id="2" class="selectModal">Third</li>
</ul>
How can I bind a click event by class in TypeScript, so when a li element is clicked I can get the element and query the ID or any other attribute of the clicked element?
There are many ways to do that. Straight forward solution:
<ul (click)="onClick($event.target)">
<li id="1" class="selectModal">First</li>
<li id="2" class="selectModal">Second</li>
<li id="2" class="selectModal">Third</li>
</ul>
onClick(e:HTMLElement){
console.log(e.id, e.className);
}
Yes, you can, but it depends on the strategy. You could do it by JQuery or using the DOM accessors. In my team we use JQuery but we don`t search the entire DOM to find the elements, instead, we use a class called ElementRef:
import { ElementRef } from '#angular/core';
...
constructor(private elementRef : ElementRef) {
}
ngAfterViewInit() {
jQuery(this.elementRef.nativeElement).find('selectModal').on('click', () => {
//do something here
});
}
The ElementRef class is a reference for the component itself in the DOM. So we're able to filter the search to this component.
Related
There was a single dropdown it was working fine Now I want to make this code reusable, or create Directive because now there are few more dropdowns are added in few more pages
I prefer to make directive, but I am really stuck here
<div class="nav-item has-dropdown">
<div class="menu-text" (click)="hasDropdown($event)">
Click me
</div>
<div class="has-dropdown-view">
Dropdown contenthere
</div>
</div>
hasDropdown(event){
let target = event.target || event.srcElement || event.currentTarget;
this.dropownView = !this.dropownView;
if( this.dropownView ){
target.closest('.has-dropdown').classList.add('has-open')
}else{
target.closest('.has-dropdown').classList.remove('has-open')
}
};
stackblitz
How to implement this click function with the directive 'method'?
I think this could be a solution for your problem:
import { Directive,ElementRef, HostListener } from '#angular/core';
#Directive({
selector: '[hasDropdown]'
})
export class HasDropdownDirective {
constructor(private el: ElementRef) {
}
#HostListener('click') onMouseClick() {
//Place your code here
}
}
Well if you are using bootstrap in your project there is a better way of adding the open class in the dropdown.
Solution Bootstrap 3.3
HTML:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"
appDropDown>
<a href="#"
class="dropdown-toggle">Manage</a>
<ul class="dropdown-menu">
<li>
Save Data
</li>
<li>
Edit Data
</li>
</ul>
</li>
</ul>
Directivefile
import { Directive, ElementRef, HostListener, Renderer2, HostBinding, } from '#angular/core';
#Directive({
selector: "[appDropDown]",
})
export class DropdownDirective {
#HostBinding('class.open') isOpen: boolean = false;
constructor(private elRef: ElementRef, private renderer: Renderer2) {
}
#HostListener('click') click(eventData: Event) {
this.isOpen = !this.isOpen;
}
}
Note: Above solution uses the HostBinding method, you can even use the ElementRef for it.
This you automatically inject the class open on the click and you can keep using the same bootstrap template everywhere.
Let's say I have an unordered list like so
<div>
<ul class="data-container">
<li #H1>00</li>
<li #H2>01</li>
<li #H3>02</li>
<li #H4>03</li>
<li #H5>04</li>
...
</ul>
</div>
What's the best way to get a element based on it's local variable using ViewChild then retrieving it's value and give it a special class (say class="active")
Is there a filter or find function I can use here?
Also, let's say I want to select one of the items, is there a better way than using (click)="SelectElement()" on all of them?
You can create a LiDirective to mark all LI. After that you can use all API provided my QueryList like find,filter, reduce, toArray ...
#Directive({
selector:'li'
})
export class LiDirective{}
#Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<div>
<ul class="data-container">
<li>00</li>
<li #H2>01</li>
<li #H3>02</li>
<li #H4>03</li>
<li #H5>04</li>
</ul>
</div>
</div>
`,
})
export class App {
#ViewChildren(LiDirective, {read:ElementRef}) lis: QueryList<any>;
name:string;
constructor(private renderer: Renderer2) {
this.name = `Angular! v${VERSION.full}`
}
ngAfterViewInit() {
let second = this.lis.toArray()[2];
this.renderer.setStyle(second.nativeElement, 'color', 'blue');
}
}
In my application i have to implement hide and show side menu. By default the page menu is open while clicking the toggle menu i have to hide the side menu. How can i implement this.
what i have is:
app.component.html, nav.component.html
<div class="menu-toggler sidebar-toggler">
<span></span>
</div>
<ul>
<li class="nav-item ">
<a class="nav-link nav-toggle">
<i class="icon-diamond"></i>
<span class="title">Name</span>
<span class="arrow"></span>
</a>
</li>
</ul>
Myservice.ts
export class GlobalService {
public collapse;
constructor() { }
setValue(val: boolean) {
this.collapse = val;
}
getValue() {
return this.collapse;
}
EDIT
app.component.html
<div *ngIf="!toggle()"class="menu-toggler sidebar-toggler">
<span></span>
</div>
app.component.ts
import { GlobalService } from "path";
export class AppComponent {
toggle() {
this.globalService.setValue(false);
}
}
how can i hide this list(in nav.html) while clicking menu toggle (app.compnent.html)? Any help will really appreciable. i am new to angular.
If use of service is not the priority then you can simply maintain simple variable to do this task.
Your app.component.ts
export class AppComponent {
showMenu : boolean = true;
}
Your app.component.html
<div (click)="showMenu = !showMenu" class="menu-toggler sidebar-toggler"><span></span>
</div>
<ul *ngIf="showMenu">
<!-- used showMenu to hide/show -->
<li class="nav-item ">
<a class="nav-link nav-toggle">
<i class="icon-diamond"></i>
<span class="title">Name</span>
<span class="arrow"></span>
</a>
</li>
</ul>
hope this helps ...
For this ,
You can make a CommonService to store the state of menu or and use that Service to make toggle you menu.
You can also use #Input #Output , in case you are having parent child relation between components.
Method will depend on how is your project/file structure.
You can create a service and preferably make a static variable inside to get and set the visibility state of the menu. By this you could directly set and get the variable by using ComponentName.variableName.
to play with the visibility you could use(Sorry if there is any syntax errors)
1> Set the document.getelementbyid("idofelement").display= none or block
2>use *ngIf="someboolean" where you should set the boolean in your ts file
I am facing a problem on getting the nearest parent element attribute value using Jquery. Can anyone help me on this. My element structure is as below,
<ul class="Someclass">
<li><span id=3 class="heading"></span>
<ul>
<li>
<ul> <li><span ><button onclick= "redirect()"></button></span</li>
<ul>
</li>
</ul>
</li>
<ul>
<script type="text/javascript">
function redirect() {
alert(....)
}
</script>
In the above code when i click that element having onclick event i want to get the value as 3 in alert() which is in the element having the class heading. The above code is in for loop so it will have more code like this in a same page.
Give this Try
function redirect(elem) {
alert($(elem).closest('.Someclass > li').children('span').attr('id'))
}
Change Markup to this:
<li><span><button onclick= "redirect(this)"></button></span</li>
this will reffer to the current object in DOM
By wrapping elem in $(elem) will convert it to jQuery object then you can traverse to the closest and find span
You can also filter that span with .children('span:first')
Fiddle Example
With your current code, pass the clicked element reference to the function like
<button onclick= "redirect(this)">asdf</button>
then
function redirect(el) {
alert($(el).closest('.Someclass > li').children('span').attr('id'))
}
Demo: Fiddle
Bu a more recommended way will be is to use jQuery event handlers like
<button class="redirect">asdf</button>
then
jQuery(function($){
$('.Someclass .redirect').click(function(){
alert($(this).closest('.Someclass > li').children('span').attr('id'))
})
})
Demo: Fiddle
This should do it.
alert($(this).closest('.heading').attr('id'));
$(".someclass li").click(function(){
$(this).closet('.heading').attr('id');
})
could you pass it on as a parameter to your redirect function? You'd somehow hold that value in a variable in your loop.
I got a solution if you can change the id and class to parent li
Working Demo
More about parent selector
Jquery
function redirect(elem) {
var myid = $(elem).parents(".heading").attr("id");
alert(myid);
}
HTML
<ul class="Someclass">
<li id="3" class="heading">
<ul>
<li>
<ul> <li><span ><button onclick="redirect(this)" id="haha">Go</button></span</li>
<ul>
</li>
</ul>
</li>
<ul>
In HTML, I have a button list. If user clicks a button,
doCommand function will be called.
The code is following,
<ul>
<li class="button1" onclick="doCommand('bold');" id="bold-button" title="bold">B</li>
<li class="button2" onclick="doCommand('bold');" id="italic-button" title="bold">I</li>
<li class="button3" onclick="doCommand('bold');" id="underline-button" title="bold">U</li>
<li class="button4" onclick="doCommand('bold');" id="strikethrough-button" title="bold">S</li>
</ul>
This is plain expression, normal web programmer will code like that.
But, I want to hide onclick event and its function for security reason.
So the HTML code will be like this,
<ul>
<li class="button1" id="bold-button" title="bold">B</li>
<li class="button2" id="italic-button" title="bold">I</li>
<li class="button3" id="underline-button" title="bold">U</li>
<li class="button4" id="strikethrough-button" title="bold">S</li>
</ul>
Is there any efficient way to do this?
Hiding onclick property but do the same work.
I am using jQuery.
if you set the same class for the btns, you could easily do:
markup:
<ul>
<li class="button1 clickable" id="bold-button" title="bold">B</li>
<li class="button2 clickable" id="italic-button" title="bold">I</li>
<li class="button3 clickable" id="underline-button" title="bold">U</li>
<li class="button4 clickable" id="strikethrough-button" title="bold">S</li>
</ul>
js:
$('.clickable').click(function(){/* doCommand('bold') or whatever */})
Edit: if you want on click to directly transform the text to bold, you could use the this (that refers to the element you clicked, and you need to wrap it inside jQuery $) keyword inside the function i.e.
$('.clickable').click(function(){$(this).css('font-weight','bold')})
The class should be the same at all buttons, like this:
<li class="button button1"...
<li class="button button2"...
Then, you can do like this in javascript.
$("li.button").click(function() {
doCommand('bold');
});
Without changing your markup and using vanilla JS you can do it the following way.
const list = document.querySelector('ul');
list.addEventListener('click', e => {
if (e.target.classList.contains('button1')) {
console.log('bold');
};
if (e.target.classList.contains('button2')) {
console.log('italics');
};
if (e.target.classList.contains('button3')) {
console.log('underline');
};
if (e.target.classList.contains('button4')) {
console.log('strikethrough');
};
})
<ul>
<li class="button1" id="bold-button" title="bold">B</li>
<li class="button2" id="italic-button" title="bold">I</li>
<li class="button3" id="underline-button" title="bold">U</li>
<li class="button4" id="strikethrough-button" title="bold">S</li>
</ul>
I assign the event to the parent list, and check the class of the target allowing to do whatever action needed.
You can use jquery's document ready event to wire up the events:
$(function()
{
$("#bold-button").click(function(){doCommand('bold');});
}
);