What is the best way to choose multiple elements within an Angular application?

<div class="modalmenu"  >
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#in">HOME</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#ab">SOBRE MI</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#his">HISTORIA</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#ex">EXPERIENCIA</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#cont">CONTACTO</a></div>
  <div class="sep" #sepinout></div>
</div>

export class NavBarComponent {
  sepin(sepinout: HTMLElement){
    sepinout.style.translate = "0px"
  }

  sepout(sepinout: HTMLElement){
    sepinout.style.translate = "-2000px"
  }
}

The selector tag #sepinout is limited to selecting only one element, making it challenging to select multiple elements simultaneously to execute the function for all items on the list

Attempts were made to use the same selector for multiple elements, but it did not prove effective as the action was only applied to one element

UPDATE / SOLUTION

<div class="modalmenu">
      <span class="material-symbols-outlined nbcont_x">close</span>
      <div class="modal_itm" (mouseenter)="sepin(sepinout)" (mouseleave)="sepout(sepinout)"><a href="#in">HOME</a></div>
      <div class="sep" #sepinout></div>
      <div class="modal_itm" (mouseenter)="sepin(sepinout1)" (mouseleave)="sepout(sepinout1)"><a href="#ab">SOBRE MI</a></div>
      <div class="sep" #sepinout1></div>
      <div class="modal_itm" (mouseenter)="sepin(sepinout2)" (mouseleave)="sepout(sepinout2)"><a href="#his">HISTORIA</a></div>
      <div class="sep" #sepinout2></div>
      <div class="modal_itm" (mouseenter)="sepin(sepinout3)" (mouseleave)="sepout(sepinout3)"><a href="#ex">EXPERIENCIA</a></div>
      <div class="sep" #sepinout3></div>
      <div class="modal_itm" (mouseenter)="sepin(sepinout4)" (mouseleave)="sepout(sepinout4)"><a href="#cont">CONTACTO</a></div>
      <div class="sep" #sepinout4></div>
</div>

export class NavBarComponent {
  sepin(sepinout: HTMLElement){
    sepinout.style.translate = "0px"
  }

  sepout(sepinout: HTMLElement){
    sepinout.style.translate = "-2000px"
  }
}
angulartypescriptdom

Answer №1

If you want to extract all the elements from your HTML, you can utilize ViewChildren

<div class="modalmenu">
  <div class="modal_itm" (mouseenter)="sepin()" (mouseleave)="sepout()"><a href="#in">HOME</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin()" (mouseleave)="sepout()"><a href="#ab">SOBRE MI</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin()" (mouseleave)="sepout()"><a href="#his">HISTORIA</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin()" (mouseleave)="sepout()"><a href="#ex">EXPERIENCIA</a></div>
  <div class="sep" #sepinout></div>
  <div class="modal_itm" (mouseenter)="sepin()" (mouseleave)="sepout()"><a href="#cont">CONTACTO</a></div>
  <div class="sep" #sepinout></div>
</div>

TypeScript

  @ViewChildren('sepinout') sepinouts!: QueryList<any>;

  sepout() {
    this.translateElements('0');
  }

  sepin() {
    this.translateElements('-2000px');
  }

  translateElements(translate: string) {
    this.sepinouts.toArray().forEach((item: any) => {
      item.nativeElement.style.translate = translate;
    });
  }

I trust this information proves beneficial to you

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript's Patch<T> type enforces strictness within the codebase

There have been instances where I needed to 'patch' an object T using Object.assign(). For instance, when propagating changes you might modify a stateful object that other code references (common in reactive programming like MobX or Vue). It&ap ...

typescriptreactive-programmingpatchinference

The 'localstorage' object is not defined in NextJS 14, make sure to use 'client' in server-side execution

While setting up the Tailwind context for a Next.js 14 website, I encountered an issue with configuring a global theme for my project. Despite creating the ThemeContext and adding 'use client' at the beginning of the file, it still caused an erro ...

reactjstypescriptnext.jsserver-side-renderingclient-side

Streaming the result of Long Polling on HttpClient directly into a CSV file

Query 1: Is there a way to modify the behavior to invoke callbacks instead of using Observable.interval? Specifically, I want the next call to be made only after receiving a response from the server, even if it takes longer than the specified interval (e.g ...

angularrxjshttpclient

Building AngularJS directives using CSS classes

My current approach is as follows: class AService { $http: any; $state: any; static $inject = ['$http', '$state']; constructor($http, $state) { this.$http = $http; this.$state = $state; }; Dealing w ...

angularjstypescript

What steps should I take to ensure that the getElementsbyName function works properly on both Internet Explorer and Firefox browsers

Encountering a JavaScript error in IE but not in FF ("document.getelementsbyname(...).0.innerhtml is null or not an object": var oldVal = parseInt(document.getElementsByName("outSL")[0].innerHTML); //value pulled from the database Here is the asp.net c ...

javascriptasp.nethtmlinternet-explorerdom

Best Practices for utilizing search feature in Angular version 13

Can someone please guide me on the correct way to implement search functionality? I want the results to be displayed in a separate component and prevent the user-entered value from being refreshed for further searches. https://i.sstatic.net/bPqUr.jpg Thi ...

angularangular-ui-routerangular-servicesangular12angular13

Implementing Angular - Injecting a component dynamically into another component

Currently, I am working on developing a small UI components framework for my personal use and enjoyment. One of the components I'm working on is a Tab component. To test this component, I need to dynamically inject another component (TabContainerCompo ...

angulartypescript

Unexpected identifier error: Typescript interface name syntax is incorrect

I am currently learning Typescript and still navigating my way through it. I have extensively searched for a solution to the issue I am facing, but couldn't find one, hence I am seeking help here. The problem lies in a SyntaxError at the interface nam ...

typescriptinterface

Personalize your Client-Id for Paypal

Currently integrating PayPal's Smart Payment Buttons into my Angular project. The index.html file contains the following script: <script src="https://www.paypal.com/sdk/js?client-id=MY_CLIENT_ID"> </script> I am working on developi ...

angularpaypal

Child route CanActivate guards execute before the parent Resolve completes

I'm currently facing an issue with resolving data prior to navigating to child routes in order to utilize that data within the children guard. The problem lies in the fact that the parent resolver is executing after the child guard has already been tr ...

angularangular-routerangular-route-guardsangular-resolver

Angular 12 app does not have Express server searching for static files

Context I am in the process of transferring an Angular application to a GKE cluster. Unfortunately, due to company policy, the base docker image I am required to use does not support the installation of new software such as shell or Angular CLI commands l ...

javascriptangularexpress

Using Selenium WebDriver with JavaScript: Handling Mouse Events (mouseover, click, keyup) in Selenium WebDriver

I am currently working on integrating Selenium testing for mouse events with dynamically generated elements. Specifically, I am attempting to trigger a "mouseover" event on an element and then interact with some icons within it. However, I have encountere ...

javascripttypescriptseleniumselenium-webdriver

`How can TypeScript be used to designate the type of a variable within the useState hook?`

I defined a variable called 'text' and a hook named 'setText'. I'm using them to update the value of a form input field. How can I ensure that 'text' is always of type string? This is what I attempted: interface TextInt ...

reactjstypescript

Utilizing jQuery to append a new item to a list without using any identifiers and an excessive number of classes

I have been tasked with adding a new link to an unordered list on three different pages using a custom.js override file. Due to system requirements, I must use jquery for this task. However, I am having trouble figuring out how to select and insert the new ...

jqueryhtmldomappend

Error: Trying to access a property that does not exist on an undefined object (retrieving 'kind

Currently, I am working on a project using angular-CLI. When I attempted to create a new module yesterday, an error popped up in the terminal saying Cannot read properties of undefined (reading 'kind') (only this error there wasn't an ...

angulartypescriptangular-cli

Deactivate specific choices from a dynamically generated dropdown menu in Angular 8

I am working on a dynamic dropdown feature with multiple fields. https://i.sstatic.net/28iQJ.png By pressing the + button, a new row is generated. Users can add any number of rows. My challenge is to prevent users from selecting previously chosen values i ...

angulartypescriptangular7angular8angular9

How to arrange an array of TypeScript strings with accents?

My array sorting function works perfectly until it encounters special characters like Á or Ű. Is there a specific TypeScript or Angular 2 method that can help me solve this issue? Here is an example of the sorting method I am currently using: private s ...

angularsortingtypescript

"Trouble with Typescript's 'keyof' not recognizing 'any' as a constraint

These are the current definitions I have on hand: interface Action<T extends string, P> { type: T; payload: P; } type ActionDefinitions = { setNumber: number; setString: string; } type ActionCreator<A extends keyof ActionDefinitions> ...

typescript

What is the process for integrating Angular files into an Express server?

I am trying to figure out how to host Angular files on my Express server. My friend created some web pages using Angular and I have an Express server set up. I have tried searching for a solution online but have not been successful. I have looked at some p ...

angularexpress

Encountering an issue when trying to upload a photo from Angular 8 to Laravel: receiving a "Call to a member function extension() on null" error

In my project using Angular 8 for the front end and Laravel 5.8 for the backend, I encountered an issue with uploading photos. I found guidance in this tutorial from ACADE MIND. Here is my template code : <input *ngIf="photoEdit" enctype="multipart/ ...

angulartypescriptlaravel-5file-upload