I have a code that goes something like this :
<sh-toggle label='ABCD' id = 'ABCD'> </sh-toggle>
I want to extract the value of label in TS file. Please tell me how it can be done? If i am trying document.getElementByID('ABCD'), then i am getting whole toggle component and unable to filter label from there.
Please mind sh-toggle is a custom tag.
You can use viewchild query to fetch a child component.
Create a template reference variable(#el) for the component / element you want to query.
<sh-toggle label='ABCD' id='ABCD' #el></sh-toggle>
Use viewchild query to fetch the child component. It looks for the first element that matches the selector.
#ViewChild('el', { read: ElementRef }) el: ElementRef;
ngAfterViewInit(): void {
console.log('label', this.el.nativeElement.getAttribute('label'));
}
If sh-toggle is your own directive (e.g.: ToggleDirective) then you can access its properties by #ViewChild:
considering you have a label #Input within ToggleDirective
add #ViewChild(ToggleDirective) toggle:ToggleDirective;
then simply anywhere from .ts just toggle.label
This is an angular way to access a component property.
document.getElementByID is never the angular way.
Stackblitz example
I'm not sure if you are using any frameworks/libraries on the UI side.
Just see if this code is enough
document.getElementById("ABCD").attributes.getNamedItem("label").value
Related
Factor is a component and Idea is an another component I need to show all the data's of Factor in the Component Idea.Can anyone say How to reuse the component.
You need to use #Input() for passing data into child component, and #Output() for emitting event from child component. You can refer to the documentation for more clarity https://angular.io/guide/inputs-outputs
you creat a component like :
ng g component xyz
after using selector reuse component Like
=> <app-xyz(component-Name)></app-xyz(component-Name))
I have a component which has an external library component. I want to change toggle one class of external library component based on some condition in my own component. Here thus, I can not use ngClass. I could use document.querySelector but I dont want to use it. Is there any other way?
You can use ViewChild in your component class to reference the external library component, configuring ViewChild's read option to give you the component as an ElementRef so you can then toggle the DOM element class.
For example, if the external component in your component's template looks like this:
<div>
<external-component class="toggle-me"></external-component>
</div>
You can attach a template reference variable to it, like so:
<div>
<external-component #exComp class="toggle-me"></external-component>
<!-- ^^ add this template reference variable -->
</div>
Then in your component class, use ViewChild to get a hold of the external component using that template reference variable, specifying { read: ElementRef } so you get its DOM element rather than its component class instance:
#ViewChild('exComp', { read: ElementRef }) externalComponent: ElementRef;
With that, you can then access the nativeElement and its classList to toggle the class:
this.externalComponent.nativeElement.classList.toggle('toggle-me');
Alternatively, if you didn't want to add a template reference variable, or were not able to, you could pass the external component's class name, rather than the template reference variable name, to ViewChild.
#ViewChild(ExternalComponent, { read: ElementRef }) externalComponent: ElementRef;
Here's a StackBlitz showing both options.
I want to show dropdown in parent component and data is in child component and i need show the data when I select dropdown in parent component and i want to show the the data in child component based on selection using ngmodel.
You can use #output decorator and event emitter for sending the data from child to parent and to send the data from parent to child back you can use #Input decorator
Find my updated stackblitz example here
For more clarity please refer to below Angular IO official document : https://angular.io/guide/inputs-outputs
I have created an Angular 6 library using 'ng generate library' command. This library is used in my base component after --prod build and then importing in app.module.ts of main application. The ...Component file in Library has #Input("leftPanel") leftPanel: ElementRef;
HTML Div element on base.component.html is like this: <div #leftPanel></div>
And the library element using its selector :
<lib-ng-mylibrary [leftPanel]="leftPanel"> </lib-ng-mylibrary>
Library component implements AfterViewInit. In the implementation method, this code execution fails: this.leftPanel.nativeElement.style.flexBasis = '50%';
it says, this.leftPanel.nativeElement is undefined. But i can see this.leftPanel point to the div. Wonder why it does not allow this.leftPanel.nativeElement` even tho #Input leftPanel is of type 'ElementRef'?
Thanks in Advance!
Harshad
Instead of sending the parent ElementRef my feeling is that your component should have and #Output and trigger an event handled by the parent, to change the native panel width.
Doing like you reduce the coupling between the object and make them more reusable.
See docs here: https://angular.io/guide/component-interaction
Still want to use ElementRef as parameter
If you still want to send the leftPanel as a parameter, you will need an #Input() variable in your main component as well, so it can resolve <div #leftPanel> to a local variable and that variable be used in [leftPanel]="leftPanel"
cheers
I have a input field which I set focus to when my view loads in the following way:
ngAfterViewInit() {
this.focusInput.nativeElement.focus();
}
this works fine from within the ngAfterViewInit() function but when I try to do it in another part of my view when a button is clicked I get an exception saying that focusInput is undefined. After reading up a bit it seems like ngIf could be the cause of this as the part of the view that contains the input field #focusInput gets shown or hidden using ngIf. Is there any way I can check using ngOnChanges() or anything else whether the #focusInput input field is currently shown and if it is set focus to it?
It happens when you have ngIf or ngFor directives inside your template and your input can not be linked to focusInput property you added inside your class. Instead use this code:
<input type="text" #myInput />
{{ myInput.focus() }}
Just add {{ myInput.focus() }} right after input inside template
The simplest solution turned out to be writing a custom focus attribute directive. This helped a lot:
How to move focus on form elements the Angular way
I know its very late to answer your question. If you want focus after any click or view change so for this you need to call change detector.
You can call change detection after your view change or a click by calling detectchanges().
`constructor(private detRef:ChangeDetectorRef) {}
#ViewChild('name_input') input: ElementRef;
private buttonClick(): void {
this.detRef.detectChanges();
this.input.nativeElement.focus();
}`
Hope this will helpful.