Modify the nearest symbol after the (touch) operation on Angular version 6

On my list, I have caret icons displayed on the left side which should change when clicked. Clicking on one icon should trigger a change in all other icons as well.

<div class="caret" *ngIf="summary.isSupervisor" style="position: absolute; left: 15px; cursor: pointer;" (click)="openSubordinateInfo(i, summary)">
  <i class="zmdi zmdi-caret-right" style="vertical-align: middle;"></i>
</div>

detailedInfo = [];
subordinateInfo;

openSubordinateInfo(i, summary) {
  this.subordinateInfo = summary;

  if (this.detailedInfo[i]) {
    this.detailedInfo[i] = false;
    $(".caret i").toggleClass("zmdi-caret-down zmdi-caret-right");
  } else {
    this.detailedInfo[i] = true;
    $(".caret i").toggleClass("zmdi-caret-right zmdi-caret-down");
  }
}
javascriptjqueryangulartypescript

Answer №1

It is recommended to avoid relying on jQuery within your Angular application as there are usually Angular-specific solutions available.

One way to accomplish this is by directly changing the icon in your HTML using the ngClass directive.

<div class="caret" *ngIf="summary.isSupervisor" style="position: absolute; left: 15px; cursor: pointer;" (click)="openSubordinateInfo(i, summary)">
    <i class="zmdi" [ngClass]="{'zmdi-caret-down': detailedInfo[i], 'zmdi-caret-right': !detailedInfo[i]}" style="vertical-align: middle;"></i>
</div>

This allows you to dynamically apply a CSS class based on a specific condition.

Below is an example of how your openSubordinateInfo function could be implemented:

openSubordinateInfo(i, summary) {
    this.subordinateInfo = summary;
    this.detailedInfo[i] = !this.detailedInfo[i];
    // Additional logic can be added here
}

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

Rendering React.js components as children of DOM elements

Trying my hand at creating a custom Map component includes the task of designing a unique Map Annotation. Here's an example of how a MapAnnotation component appears in the render function: <MapAnnotation title='Annotation' latitude={ 12.3 ...

javascripthtmlcssreactjs

Retrieve all `div` elements within the shadow root that have a matching class name

I have discovered a shadowRoot within my HTML page, which I am able to access using the following code snippet: var shadow = document.getElementById( "3rd-party-div" ).shadowRoot; Upon further examination, I noticed that there are ...

javascripthtmldomshadow-dom

What is the best way to bring a function into another function from a separate file?

I am attempting to call the "changenavitemstate" function from the "Navbarlink" file. When I try to import the function into the file, I encounter an error. I have tried using props to access the function but have been unsuccessful. ...

javascriptreactjsfunctionimport

"Utilizing SharePoint's JSOM to retrieve taxonomy in a recursive manner

I am facing an issue with retrieving a tree of terms recursively from a term group using JSOM / JavaScript. The challenge lies in the fact that all values are being fetched recursively, but the order is completely incorrect. function recurseTerms(curre ...

javascriptrecursionsharepoint-2013

What is the best way to enable swipe functionality for ion-items in Ionic without requiring a click?

I have been working on implementing an ion-list with swipable ion-items that do not need to be clicked on the side to trigger an event. The functionality I am aiming for is similar to the default contacts app on Samsung phones, where a left swipe calls an ...

javascriptangulartypescriptionic-framework

Issue encountered in NestJS with Prisma: When trying to invoke the class constructor t without using 'new', an error occurs stating that it

I've been attempting to establish a Prisma client within my NestJS application, but I keep encountering this persistent error: [Nest] 14352 - 12.05.2023, 23:21:13 ERROR [ExceptionHandler] Class constructor t cannot be invoked without 'new&apos ...

typescriptnestjsprisma

The component 'AppComponent' cannot access the property 'results'

Having some trouble accessing the results field from a json response. The error message reads, Property 'results' does not exist on type 'AppComponent'. import { Component } from '@angular/core'; // Import `HttpClient` impor ...

javascriptjsonangular

Guide to creating 2D point shapes with three.js

Is there a way to render a 2D shape of points in three.js? I have been struggling to find a working geometry for this task. I simply want to create a polygon of points that lie on the same plane. The 'Shape' object doesn't seem to be suitab ...

javascript3dthree.jsshapes

One file successfully imports a dependency, while the other file does not seem to recognize it

I'm diving into the world of Vuex, exploring how to create an auth module. I came across some examples that I'm trying to implement, but I've hit a roadblock when attempting to use axios in my store. My store is structured with separate file ...

javascriptvue.jsaxiosvuex

Tips for utilizing data from one JavaScript file in another JavaScript file

In my current setup, I have two JavaScript files - a.js and b.js. The input data is stored in a.js, while the unit tests are written in b.js. Now, the challenge I am facing is how to access the input data from a.js in b.js. I understand that both files can ...

javascriptajax

Discover the power of working with asynchronous values in objects using the latest @if syntax in Angular 17

Previously, we were able to chain multiple async operations using *ngIf directives in Angular. This allowed us to avoid repeating the async pipe in the template and instead reuse them as a single subscription. With the introduction of the new @if syntax in ...

angulartypescriptangular17angular-observable

Efficiently populating a dataTable with data using ajax

Here is the code I am using to load a data table: $(".dataTable").dataTable({"bProcessing": true, "sAjaxSource": "datatable"}); This file contains the data for the datatable: return '{ "aaData": [ [ "row 1 col 1 data", "row 1 col 2 data", "row 1 ...

jqueryhtmlajaxdatatables

Convert HTML to PDF and ensure that the table fits perfectly on an A4

I am currently utilizing html-pdf to convert my table data into a PDF format. The issue I am facing is that the table content exceeds the specified A4 paper size in such a way that two columns are completely missing in the generated PDF. However, when I c ...

javascriptnode.jsnpmhtml-pdf

Is there a way to reverse the JSON.stringify method?

I need help with decoding a string that contains arrays and JS objects which were originally converted using JSON.stringify function. Can someone guide me on how to accomplish this? Thank you for your assistance. ...

javascriptjson

"Transforming a simple object into an instance of a different type in JavaScript: A step-by-step guide

Having an issue storing a session on disk for local development. The application is asking for an instance of Session to be returned, not an Object function storeCallback(session) { console.log("storeCallback ", session); fs.writeFileSync(&qu ...

javascriptnode.jsshopifyjavascript-objects

How to effectively create factories in AngularJS

I stumbled upon this angularjs styleguide that I want to follow: https://github.com/johnpapa/angular-styleguide#factories Now, I'm trying to write my code in a similar way. Here is my current factory implementation: .factory('Noty',functi ...

javascriptangularjs

One issue that may arise is when attempting to use ngOnDestroy in Angular components while rearranging user transitions

Encountered an issue recently with Angular - when the user navigates from component A to component B, component A remains active unless ngOnDestroy is triggered. However, if the user visits component B before going to component A and then leaves, ngOnDes ...

javascriptangularangularjstypescript

Mesh normalization in three.js is the process of standardizing the vertices

After loading a mesh from an obj file, I attempted to normalize it. Unfortunately, the results are not what I expected. Below is the code snippet for loading and centering the mesh: const manager = new THREE.LoadingManager(); const loader = new THREE.OBJL ...

javascriptthree.jswebgl

Ways to extract data from an array containing nested objects

I have received data from an external source: [{ "mode": "CURR", "isin": "PLESLTN00010", "from": 451183, "to": null, "data": [{ "t": 1624265539, "p" ...

javascriptarraysobject

The code for the bouncing image isn't functioning properly outside of the JSFiddle environment

I'm having issues with this jQuery snippet in my web application. It works fine on jsfiddle, but not when I add it to my project. Here's the code: $('.myimage').mouseenter(function() { $(this).effect('bounce',500); }); Her ...

javascriptjqueryhtml