<ul>
<li (click)="ChangeColor($event)">ONE</li>
<li (click)="ChangeColor($event)">TWO</li>
<li (click)="ChangeColor($event)">THREE</li>
</ul>
ChangeColor(e){
e.srcElement.style.color="blue"
}
In the list above, when any of the li items are clicked out of the three options, the color of the clicked label should change to blue. When another item is clicked, all item colors should revert back to their original and only the current clicked item's color changes.
Mehdi's advice is to avoid direct DOM access unless absolutely necessary.
Remember, it's best to control your view using data rather than directly manipulating the DOM
Check out my modified and functional code snippet on https://example.com/edit/abc123?p=preview
When working with Angular, it's best practice to avoid directly manipulating the DOM element and instead let Angular handle it for you. For instance, you can create a list using an array defined in your component like this:
export class ExampleComponent {
links: any;
activeLink = -1;
constructor() {
this.links = ['ONE', 'TWO', 'THREE'];
}
}
Then in your template file, you can display the list like this:
<ul>
<li *ngFor="let link of links; let i = index"
(click)="activeLink = i"
[ngClass]="{'blue': activeLink === i}">
{{ link }}
</li>
</ul>
Make sure to define the CSS class "blue" in your stylesheets:
.blue {
color: blue;
}
When I use the fixed-top class on my nav bar, it stays on top of the header as shown in the image. However, when I scroll down, the menu also scrolls down. Is there a way to make the navigation look the same but not follow when scrolling? I want to achieve ...
Encountering an error when trying to open my Angular project in IE11. The error message is as follows: SCRIPT1002: Syntax error vendor.js (224520,1) The line causing the error (224520) looks like this: class PreventableEvent { constructor() { ...
I am currently using Skeleton for my simple CSS needs. While it works fine on desktop, I have noticed that on an iPhone, the text in my button gets cropped as shown in the picture. https://i.stack.imgur.com/EYo2P.png Below is the HTML code I'm using ...
I am looking to create a website with an abundance of paragraphs, but I am curious if there is a more efficient method for spacing the content in the code without manually inserting <p> tags for each paragraph. It seems like it may require more than ...
I've encountered an issue where my logo and the mobile dropdown menu won't stay on the same line when the screen size falls below a certain point. I attempted to resolve this by using media queries to resize the image, but unfortunately, the prob ...
Simply put, I've uploaded a video to Google Drive that I want to embed on my website. The embed code I got from the shared-video page for the video is: <iframe src="https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/preview" width="640" ...
Attempting to add animation to my webpage has presented a challenge: I have a content div on my page, along with a button that triggers the opening of another div above the content. My goal is to have this top div fade and slide into view while simultan ...
My Angular2-based client-side application has a base class: abstract class BaseClass { @HostListener('window:beforeunload') beforeUnloadHandler() { console.log('bla'); } } and two similar derived classes: @Component({ ...
Struggling to figure out how to adjust the height of my column to accommodate three elements in each the first and second columns. As a newcomer to design elements, I could really use some guidance. Here's the mock-up I aim to create: https://i.sstat ...
Whenever I switch the block style to ng-template, my class="icon d-none d-sm-block" doesn't seem to be functioning properly. Any suggestions on how to resolve this issue? <div class="icon d-none d-sm-block" *ngIf="user; th ...
As a beginner in the coding world, I am diving into developing an application with SpringBoot that incorporates SpringData MongoDB, Angular, and MongoDB itself. My goal is to create a form submission process where if a user's details are already prese ...
Let me try to explain this the best way I can. Below is a function that generates an HTML element in the #root div: Here is the function: var root = document.getElementById("root"); function createEl(element, selectorType, selectorName, src, in ...
When it comes to adding items to an array BehaviorSubject, the common practice is to assign a copy of the entire array along with the new item using next(). However, I am looking for a way to push items into this array without having to assign a full copy ...
Looking for help to change the color of a stepper from 'primary' to 'success' using React hooks. The stepper component does not have a built-in color method like an icon, so I'm struggling to find a solution. Any advice would be gr ...
After doing some research on various platforms like Stack Overflow, I've come across information stating that re-paints and re-flows can be quite taxing on a browser's resources. I am interested in learning about alternative CSS/JS techniques to ...
I'm working on a website using Bootstrap 4 and it features multiple tabs with different tables, some of which contain a large amount of data. I am looking to implement a feature where the table header remains fixed at the top of the page as the user s ...
HTML Code <div class="app-header-logo"> <a href="/home"><img ng-src="img/..."/></a> </div> CSS Styles .app-header-logo { width: 48px; height: 64px; padding: 8px 0px 8px 0px; margin: 0px 16px 0px ...
When I hover over a div, I want the background color to change. Additionally, I need the color choice to be based on an element within my component. <div *ngFor="let u of users;" [style:hover.background-color] = "u.selected ? 'red ...
My code is successfully adding an svg background with js and rotating it using set interval. It works perfectly on Chrome, but not on any other browser. Any suggestions on how to make it work universally? let i = 0; setInterval(() => { document.b ...
As a newcomer to Bootstrap and web development, I am eager to create a simple welcome-page with a specific design in mind. The layout should resemble the image found https://i.sstatic.net/AAEQ4.png. The colors in the image indicate where flex rows could b ...