I am facing an issue with a div that is being looped using ngFor. What I want to achieve is when a user clicks on one of the divs in the loop, only that particular div should change its text color. If another div is clicked, it should change color while the previously clicked div reverts back to its original color. How can I implement this functionality using Angular 2?
Here is an example:
<div *ngFor="let x of y; let i= index" (click)="changeColor()"></div>
Here is a solution for your issue:
To solve the problem, adjust the template code as shown below:
<div [ngClass]="{'selected-color' : i==selectedIndex}"
*ngFor="let x of y; let i= index" (click)="changeColor(i)">
<!-- insert content here -->
</div>
Note that I have included [ngClass] and connected it to a condition. Also, observe how the index is passed into changeColor(i)
In your component class:
public selectedIndex;
changeColor(i){
this.selectedIndex = i;
}
Create the CSS class for the background color according to your preference:
.selected-color{
background-color: red;
}
Now everything should be functioning correctly.
Imagine I have the following component: @Component({ selector: 'app-dumb', template: '<button (click)="increment()">Increment</button>' }) export class DumbComponent { @Output() onIncrement = new EventE ...
Currently, I am immersing myself in learning Angular2 by following along with this project: https://github.com/start-angular/angular2-node-socket-io-chat-app I am utilizing VS Code and the Debugger for Chrome. However, when attempting to debug the code an ...
Having trouble with IntelliJ 2019.2.2 Ultimate not detecting scss imports from stylePreprocessorOptions - includePaths Here is the directory structure: https://i.stack.imgur.com/SQEDT.png In my angular.json file, I have specified: "stylePreprocessorOpt ...
Is there a Bootstrap class that can be used to remove a background image from a div? Currently, I have this style defined in my CSS: background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0)); I would like to remove it using: bg-img-non ...
I have developed a unique photo browsing app that allows users to swipe between pages to view different photos. Currently, I have implemented a working view for this feature. <ScrollView orientation="horizontal" ios.pagingEnabled="true" > <Stac ...
I have created a unique conditional type that accurately generates a union of valid array indices: type ArrayIndices< N extends any[], Acc extends number[] = [] > = Acc['length'] extends N['length'] ? Acc[number] : ArrayIn ...
In my current project, I am working on a component that includes three buttons: two default options and an additional modal dialog option for more advanced choices. When one of the default buttons is clicked, the component emits an event based on the selec ...
Looking to customize the open/close icon on the Angular PrimeNG panel component. At the moment, it's displaying a plus/minus sign, but I'd like to switch it out for a chevron up/chevron down icon instead. While I've managed to add extra icon ...
We are developing our component library using JavaScript instead of TypeScript. In our project's jsconfig.json file, we have set checkJs: true. All components in our library are functional and not based on class components. Whenever a component needs ...
One of my challenges involves a variable const prediction = useRef<any>(null); A button triggers a function that updates the variable's value: function showResult() { classifier.current.classify(capture, (result) => { ...
Currently diving into typescript and facing a puzzling situation. I am attempting to check if the browser supports webgl. The detection process involves creating a canvas object on the document and obtaining the context to determine if it is "webgl" or "ex ...
The code below shows that onResizeWindowHandles is currently of type any, but it should be an array of functions: export default class PageLayoutManager { private $Window: JQuery<Window>; private onResizeWindowHandlers: any; constructor () { ...
Currently, I am working with Angular 12 within my TS file and have encountered an array response from a file upload that looks like this- [ { "id": "7", "name": "xyz", "job": "doctor" ...
Recently, I've been experimenting with integrating type-graphql into my nodejs project. While implementing @Query methods went smoothly, I'm facing challenges with the following code snippet in combination with Moleculer service. @Mutation() / ...
I understand that the solution to this issue can be found on SOF, but utilizing --legacy-peer-deps or --force is not an option for me on my production server. I am eager to comprehend the root cause of this error and find a proper resolution. Upon install ...
Scenario I am currently working on implementing strong typing for the onChange function of a UI library's Select component. To provide some context, the existing type definition for their onChange is as follows: onChange?: (...args: any[]) => v ...
Embarking on a journey of jasmine unit testing, I am encountering challenges when trying to run jasmine and locate my TypeScript written specs. Using jasmine-ts, I typically execute the following command: jasmine-ts --config=spec/support/jasmine.json The ...
Looking to pass a boolean value to the Generic type in order to be utilized within a condition. This is the generic type interface OptionTypeBase { [key: string]: any; } type OptionsType<OptionType extends OptionTypeBase> = ReadonlyArray<Opt ...
I'm struggling to grasp the concept of the observer/subscriber model and how to iterate through the returned data. For example, I have a cocktail component that fetches an array of cocktail objects. The key part of cocktail.service.ts: constructor( ...
Consider a scenario where there are multiple payload options available: interface IOne { type: 'One', payload: { name: string, age: number } } interface ITwo { type: 'Two', payload: string } declare type TBoth = IOne ...