Questions tagged dom

Explore the latest questions and answers asked by our top developers.

Angular – How to close/remove search input when input empty, click outside input element or press esc

I have a search bar that displays results when fed with text input, the problem is: the search results do not go away even if the input field/search bar is empty. It does not close if I press ESC or click outside the search bar or search results. I have tried different things with renderer […]

By do-ri
Categorized as angular, dom, html, javascript, typescript Tagged , , , ,

Remove dynamically created element by id in angular component

I’ve added an external script to a component like so: ngAfterViewInit() { let s = document.createElement("script"); = "hs-script-loader"; s.async = true; s.src = "//"; this.element.nativeElement.appendChild(s); } The script actually loads a live chat widget which is dynamically created in the DOM when the script is loaded. I’d like to remove the element from the […]

By Bob Deli
Categorized as angular, dom, javascript, typescript Tagged , , ,

Stripe form keeps disappearing

I am implementing stripe in my Angular app and I have the following issue: I fill the form. Let’s say that before clicking and actually completing the payment I go back to another route and back to the payment view again. Poof! The form is gone! And I think I know where the problem is […]

By F lix
Categorized as angular, dom, forms, frontend, stripe-payments Tagged , , , ,

How to access to an element created on the fly in angular 12

I am using a table similar to (it is not the same, but very similar) in an angular 12 project. I need to populate the table with data like: Id Name Action 0 John Delete 1 Conn Delete The "Delete" action is a button that looks like a link and it would delete the […]

By trofinao
Categorized as angular, angular12, dom, javascript Tagged , , ,

Getting Selected Text Events in Angular

I am not sure if I understand how text selection works in an Angular application. What I want to do is register a listener to get an event whenever the user selects some text inside the element. If I code the element: <div [innerHTML]="doc.text" (selectstart)="evtSelection($event)" (selectionchange)="evtSelection($event)" (select)="evtSelection($event)"></div> I only get selection "start" events and nothing […]

By AlanObject
Categorized as angular, dom, dom-events Tagged , ,

How to place Angular Material Dialog inside a specific component visually?

By default, Angular Mat Dialog is placed in the <body> of HTML in DOM. I want to have a Dialog that is placed inside a particular component. I don’t want it to be visually separate from the parent component and be placed on top of <body>. Suppose I have a div element at the top […]

scrollIntoView() erratic behavior in Chrome

I have setup my html to jump from section to section each time the user clicks a button. When I click a button on my website (not in production) scrollIntoView() does not properly execute. It registers within the DOM, but the browser does not visually show the scroll until I zoom in/out on the page, […]

By rarara
Categorized as angular, dom, html, javascript Tagged , , ,

Angular InnerText manipulation alternative?

Display JSON data after button is clicked in Angular (alternative option), Please let me know if this is okay, and if you have a better result I would like to see it 🙂 I came on to this solution as I wanted to manipulate a DOM element to show Json data when a button is […]

By BeatrixKiddo
Categorized as angular, dom, typescript Tagged , ,

Angular Display JSON data after button click

Display Json data when a button is being clicked and make a certain element display the Json data. RESULT: result of code TS: import UsersJson from ‘../../assets/users.json’; //Json file location export class UsersComponent implements OnInit { getUsers(special:any):void{ special.innerText = JSON.stringify(UsersJson).replace(/,|}|{|/g, "n"); constructor() { } ngOnInit(): void { } } HTML: <div class="wrapper"> <button (click)="getUsers(lblName)">Show All […]

By BeatrixKiddo
Categorized as angular, dom, typescript Tagged , ,

Why are we NOT supposed to mix DOM code with Angular code?

I am designing a master and child grid in which by clicking on a row of the master grid, data in child grid changes accordingly. To do so, after clicking on a row of the master grid, I call reloadItmes() from the child controller like below: $("#masterTable tbody").on("click", "tr", function (event) { event.preventDefault(); jQuery(this).addClass(‘selected’).siblings().removeClass(‘selected’); angular.element($(‘#childTable’)).scope().reloadItems(); […]

By Arman Vaziri
Categorized as angularjs, dom, html, jquery Tagged , , ,
1 16

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us