Using the mat-selection-list component, I have set up a list of contacts displayed through mat-list-option:
https://i.sstatic.net/ri4lP.png
Currently, the background-color changes when I click on a specific contact-name (e.g. Graeme Swan), and it remains constant until I select another contact. However, I am looking to also change the text-color, which should stay consistent until a new contact is clicked.
You can view the implementation on this StackBlitz link.
How to apply styles to selected items in list components:
In your HTML file:
<mat-selection-list #linkList >
<mat-list-option *ngFor="let link of links;index as i" (selectionChange)="selectionChanged(i)" [class.active]="selectedItem === i">
<a mat-list-item> <span class="contact-names">{{ link }}</span> </a>
</mat-list-option>
</mat-selection-list>
In your TypeScript file:
selectedItem:number = null;
...
selectionChanged(i) {
selectedItem = i;
}
Add the following CSS code:
.mat-list-item.active .contact-names{
color: red;
}
Visit this StackBlitz for an example.
I am currently working on enhancing my angular application by adding a new service. However, I have encountered an error that I need help fixing: The error message states: Type 'Teacher[]' is not assignable to type 'Teacher'. Property ...
Hey there, I've been pondering a solution to a little dilemma I'm facing. Let me share my thoughts and see if you can lend some insight or tell me where I might be going astray. Setting the Stage: In the realm of angular app creation, it's ...
Why is it not recognizing styles and showing an error? All paths seem correct, styles and scripts are connected, but it's either not reading them at all (styles) or displaying an error. Here is the html, javascript, css code. How can this error be fix ...
I'm struggling with a piece of code that creates an SVG and then displays it on a canvas. Here is the Jsbin Link for reference: https://jsbin.com/lehajubihu/1/edit?html,output <!DOCTYPE html> <html> <head> <meta charset=&qu ...
I am working on an Angular project where I aim to create a dashboard displaying various progress circles. Depending on the progress, I need to change the color of the line. Current appearance: https://i.sstatic.net/hR2zZ.png Desired appearance: https://i. ...
I am currently working with an array in my DataComponent and I would like to pass 'string4' to my ConsumeComponent through a Service: export class DataComponent { mystring: string = ''; constructor(private myService: myService) {} ...
I have come across many inquiries related to this issue, but none of them proved helpful for me. Below is my HTML code: <div class="pl-lg-4"> <div *ngIf="isStorySelected; else hi" class="row"> ...
I have been working on creating a login authorization system to secure certain routes in an angular application, but I keep encountering a TypeScript error in the auth-guard.service during compilation. Despite my efforts, I am unable to pinpoint the issue. ...
I have a div containing some images: <div> <img src="1.png"> </img> <img src="1.png"> </img> </div> Currently, the layout in browsers looks like this: ----------------- |XX | ----------------- H ...
text not aligning properly and causing unnecessary line breaks insert image here I attempted to toggle the word wrap feature, installed the Rewrap plugin, and played around with vscode settings ...
I have a TypeScript utility class called myUtils.ts in the following format: export class MyUtils { static doSomething(input: string) { // perform some action } } To utilize this method in my component's HTML, I have imported the class into m ...
I encountered an issue with a treemap visualization. I came across an example that is similar to my situation, which can be viewed here: In the demo, you can see that the size of each square in the treemap is determined by the content size. However, all s ...
I am working on creating a progress bar and have the following CSS code: #result{ background:#8c8f91; margin-left: 15px; margin-right: auto; table-layout: fixed; border-collapse: collapse; z-index: -1; position:relative; width: ...
I am looking to customize the appearance of an unfamiliar HTML code by changing its text color to cyan, regardless of its current color. I attempted the following: <p style="color:cyan !important;"> <span style="color:red;">Hello World</ ...
I have a flexbox setup with a left and right section, each of equal width. The left side displays an image and the right side contains text. While this layout works fine in Google Chrome, it does not wrap properly in Internet Explorer 11 when the width is ...
I've been attempting to change an HTML tag using PHP or jQuery. The current default tag is: <li class="dropdown"> <a href="index.html" class="dropdown-toggle"> Home</a></li> My desired replacement for the above HTML tag is: ...
I have a Jssor slider and I want to create an animation for the first slide. My goal is to make two images come from the sides and merge in the center. I tried using a div for each image with a caption, and it works well. However, the second image starts ...
I'm facing an issue with a div structure that looks like this <div class="empower-btn" [showQR]="showQR" [selectedCoin]="coin" [availableAmount]="getCoinAmount()" [ ...
Currently, I am facing an issue with making a call to an ASPX URL as the return keeps coming back as a failure. I have successfully used this URL in previous programming projects, but this is my first time utilizing it with Ext JS. Despite researching dif ...
Having some difficulty with the :first-child selector. It just won't cooperate in my code. The goal is to execute a simple transform on two elements using the :first-child, but it's failing in multiple instances. Let me explain: First scenario: ...