I have a custom component in angular that i re-use everywere in my app. This is a button component and i call it like this where i want to use it: <app-delete-btn></app-delete-btn>
I want to set the attribute tabindex="1" to my component but it does not work.
This attribute gives a TAB order to specific html elements.
Upon inspecting this strange behaviour, and as of my understanding, tabindex works but you have to specify it for the parent and ALL the child components
So i did this and it worked:
Upon declaring my custom component in my html <app-delete-btn tabindex="1"></app-delete-btn> i gave him the tabindex
and then i had to add it in the app-delete-btn.ts button inside the component <button tabindex="1">Delete</button>
The problem is that i may re-use that button therefore i can't add the tabindex from within the component itself otherwise is going to apply everywhere i use it.
Finally my question is:
Is there a way when calling <app-delete-btn></app-delete-btn> to assing a tabindex property to all of it's childrens (and by childrens i mean the button delcared in the html of the component)?
Add this to your button :
#HostBinding('attr.tab-index')
tabIndex = 1;
This should do the exact same thing as this
<app-delete-btn tabindex="1"></app-delete-btn>
But automatically
Related
This is generated element by the plugin
<span class="leaflet-draw-draw-polyline">...</span>
I want to click on an element from some other part of the code.
How can I trigger click on this element without using ref on it?
Since the element seems to be completely out of a React component's scope, you could try either of the following:
create a React component and use refs
simply use document.getElementsByClassName() and .click()
Hi I am using an UI Library (forced to, company issue..) which provides an Angular component, which renders a form.
Now I want to disable all of the input fields an buttons inside this form. But the component of the library doesn't provide me the possibility to pass a parameter to change the status to read only.
Now I have no other option to do dirty DOM hacking. However it doesn't seem to work.
Here is my HTML of my own component, where I render the Library Component:
<component-of-the-library #formComponent></component-of-the-library>
Now inside my own components class I reference it:
#ViewChild('formComponent', {read: ElementRef}) formComponent: ElementRef;
However when I use the nativeElement feature and the querySelectorAll() function I don't see the button elements:
ngAfterViewInit() {
console.log(this.formComponent.nativeElement);
console.log(this.formComponent.nativeElement.querySelectorAll('button'))
}
The first line outputs the DOM of the library component. There I also see the buttons.
However the second line just returns an empty NodeList.
Am I missing something?
Instead of doing all these, come up with a div overlay and with the size of your form and make show or hide it based on your needs.
It will be easier than disabling each form inputs and buttons. Also the overlay is not the component but your div.
I able to read the DOM Nodes present in the child component from the parent Component using ViewChild() https://stackblitz.com/edit/angular-edmyur?file=src%2Fapp%2Fapp.component.ts
EDIT: I see another problem. AfterViewChecked gets called multiple times...
I found the answer myself. The problem is the LifeCycleHook. AfterViewInit works for your own component, but it doesn't wait for the child components to finish rendering.
When I use AfterViewChecked it works!
However I am still puzzled, that logging the nativeElement has always given me the correct DOM, even though it's still not rendered.
I have a multi-picklist component that houses a list of checkbox components. The parent component has a CSS :focus and :hover class for the mouseover. All controllable elements are in the tab index (so you can awkwardly use the keyboard to tab through the checkboxes).
Now we want to allow arrow-key navigation in the multi-picklist. Basically I need to use #ViewChild to grab the element I need and set .focus() to it. And that's exactly what I did in a different component, and that worked. However, here it does not work. The only difference is that in the component where it works my *ngFor loop iterates over a list of divs and in this case it does so over a list of components.
So what this boils down to is that I can't get the :focus pseudo class to stick to my component.The following code is not complete, just trying to get the first element focused. Sort of PoC.
MultiPicklist.component.html:
<div (keydown.ArrowDown)="arrowDownHit($event)">
<div [hidden]="multiPicklistState === 'collapsed'" (keydown.Escape)="closeBox()" #multiPicklist>
<app-checkbox
#checkboxItems
class="multi-picklist-checkbox"
*ngFor="let item of picklistItemList; trackBy: trackByFunc; let i = index;"
[fieldName]="item.value"
[label]="item.label"
[chckbxId]="'multiPicklistChkbx'+title+i"
[tooltip]="item.tooltip"
[isChecked]="item.isChecked"
(checkboxChanged)="inputChanged($event)">
</app-checkbox>
</div>
</div>
MultiPicklist.component.scss:
.multi-picklist-checkbox:hover, .multi-picklist-checkbox:focus{
background-color: $multi-picklist-item-hover-bg-color;
}
MultiPicklist.component.ts:
arrowDownHit(ev){
ev.preventDefault();
this.multiPicklist.nativeElement.firstElementChild.focus();
}
It's worth mentioning that the :hover pseudo class works, hovering the mouse over the component gives it the correct background color. But not .focus(). Furthermore, no error is thrown,.
This is just a workaround, not an actual answer or solution.
I was able to set the focus of an HTML element inside the component. It resulted in an ugly little line of code:
this.multiPicklist.nativeElement.firstElementChild.lastElementChild.focus();
Of course in an ideal universe I'd be able to just apply the focus to the entire component, or whatever div the browser ends up seeing.
This question already has answers here:
Angular2 - catch/subscribe to (click) event in dynamically added HTML
(2 answers)
Closed 5 years ago.
I try to append a div into my page via a function in my component like this :
showTile($event: any,id: number){
$($event.target).append('<div (click)="somefunction(id)"></div>'))
}
somefunction(id :number){ console.log(id) }
The div has been appended by somefunction is not handled, in angular js 1.x I used to work with $compile.
You should not use jQuery to affect the DOM tree when your application works with Angular2. There is always a way to avoid this kind of the anti-pattern.
If I understand properly, you want to append the div on every click on the element. Why don't you create another component for this? In template, use *ngIf directive in order to show/hide additional content and bind click event to #Component, which will toggle boolean property. Then in parent component just use this component as many as you want. If these child components are specific and needs information, which are available in parent component, just #Input them. If you want to invoke parent component function, you could use #Output in child and then - invoke parent function.
There you can read a lot about this - https://angular.io/docs/ts/latest/cookbook/component-communication.html
Inside component.html file
<div *ngIf="condition" (click)="dosomething(data)">
<label >Click here </label>
</div>
//You div will appear only if condition is true
Inside component.ts file
dosomething(item){
console.log(item);
//do something here
}
I'm trying to work out how to add a class to a child element of a button, specifically to the <i> below:
<button><i class="icon-undo"></i> Undo</button>
Ideally, using plain JavaScript, there'd be a function which can be added to the button (i.e. <button onclick="function()">) which would add the class "icon-spin" to the child <i> of whatever element was clicked (so it could be used in multiple places in the same page).
Maybe the code in this question helps.... posted the answer today itself. Just pass 'this' to the function and you could do wonders to the DOM thereafter
get nearby sibling in javascript