Only one component in Angular is utilizing the scss design

Question

Only one component in Angular is utilizing the scss design

I have a component that generates multiple buttons next to each other, each with a specific style. Additionally, each button is randomly assigned a different color based on its class.

The issue I am facing is that when I include this component in one of my other component HTML files, it displays correctly. However, when I try to add it to another component, the design appears completely off.

It seems like the CSS styles are not being applied to the new components for some reason...

Even though it's the same code as it's an imported component, I'm puzzled by why it doesn't work...

Below is my code:

--> status-bar.component.html

<div *ngFor="let button of [1,2,3,4,5,6,7,8,9,10]; index as i">
    <button id={{i}}  [ngStyle]="getClassrandom(i)"></button>
  </div>

--> status-bar.component.ts

import { Component, Input, OnInit, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'status-bar',
  templateUrl: './status-bar.component.html',
  styleUrls: ['./status-bar.component.scss']
})


export class StatusBarComponent implements OnInit {


  getClassrandom(i: number): any {
    const classesArray = [
      'status__button status__button--red',
      'status__button status__button--yellow',
      'status__button status__button--green'];
    const element = document.getElementById(i.toString());
    element.className = classesArray[Math.floor(Math.random() * 3)];
  }

  constructor() {
  }
  
    ngOnInit(): void {
    }

  }

---> status-bar.component.scss

.status__button {
    float:left;
    height: 80px;

    width: 25px;
    border-radius: 10px;
    border: 1px solid rgb(255, 255, 255);
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.status__button--green {
    background: limegreen;
    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.2);
    opacity: 0.5;
    &:hover {
        opacity: 1;
    }
}
.status__button--yellow {
    background: yellow;
    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.2);
    opacity: 0.5;
    &:hover {
        opacity: 1;
    }
}

.status__button--red {
    background: red;
    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.2);
    opacity: 0.5;
    &:hover {
        opacity: 1;
    }
}

I am using this component in other components like test-bar.component.html or status-bar.component.html

The main component is status.component, which imports all the others along with the status modules.

If anyone has insight into what might be causing this issue, please share your thoughts.

html css angular typescript components

Answer 1

Answer №1

You're combining ngStyle, ngClass, and the className property in your code.

Here's one way to achieve this:

<!--Make sure to use ngClass-->
<div *ngFor="let button of [1,2,3,4,5,6,7,8,9,10]; index as i">
    <button id={{i}}  [ngClass]="getClassrandom()"></button>
</div>

In the getClassrandom() function:

  getClassrandom(): string{
    const classesArray = [
      'status__button status__button--red',
      'status__button status__button--yellow',
      'status__button status__button--green'];
    //Ensure you are returning a string value
    return classesArray[Math.floor(Math.random() * 3)];
  }

Also, instead of passing the index "i" and using document.getElementById which can cause issues if IDs clash, consider using a template reference variable:

<div *ngFor="let button of [1,2,3,4,5,6,7,8,9,10]; index as i">
    <!--Note: This is just an example, avoid [ngStyle] in this context-->
    <button #statusbutton [ngStyle]="getClassrandom(statusbutton)">
    </button>
</div>

getClassrandom(element: HTMLElement): any {
    const classesArray = [
      'status__button status__button--red',
      'status__button status__button--yellow',
      'status__button status__button--green'];
    element.className = classesArray[Math.floor(Math.random() * 3)];
  }

Using a function in a *ngFor loop may not be optimal. You could consider utilizing ViewChildren for better performance:

@ViewChildren('buttonstatus') buttons:QueryList<ElementRef>

ngAfterViewInit()
{
       const classesArray = [
          'status__button status__button--red',
          'status__button status__button--yellow',
          'status__button status__button--green'];
       this.buttons.forEach(x=>x.nativeElement.classNameclassesArray[Math.floor(Math.random() * 3)];=
}

Answer 2

You're combining ngStyle, ngClass, and the className property in your code.

Here's one way to achieve this:

<!--Make sure to use ngClass-->
<div *ngFor="let button of [1,2,3,4,5,6,7,8,9,10]; index as i">
    <button id={{i}}  [ngClass]="getClassrandom()"></button>
</div>

In the getClassrandom() function:

  getClassrandom(): string{
    const classesArray = [
      'status__button status__button--red',
      'status__button status__button--yellow',
      'status__button status__button--green'];
    //Ensure you are returning a string value
    return classesArray[Math.floor(Math.random() * 3)];
  }

Also, instead of passing the index "i" and using document.getElementById which can cause issues if IDs clash, consider using a template reference variable:

<div *ngFor="let button of [1,2,3,4,5,6,7,8,9,10]; index as i">
    <!--Note: This is just an example, avoid [ngStyle] in this context-->
    <button #statusbutton [ngStyle]="getClassrandom(statusbutton)">
    </button>
</div>

getClassrandom(element: HTMLElement): any {
    const classesArray = [
      'status__button status__button--red',
      'status__button status__button--yellow',
      'status__button status__button--green'];
    element.className = classesArray[Math.floor(Math.random() * 3)];
  }

Using a function in a *ngFor loop may not be optimal. You could consider utilizing ViewChildren for better performance:

@ViewChildren('buttonstatus') buttons:QueryList<ElementRef>

ngAfterViewInit()
{
       const classesArray = [
          'status__button status__button--red',
          'status__button status__button--yellow',
          'status__button status__button--green'];
       this.buttons.forEach(x=>x.nativeElement.classNameclassesArray[Math.floor(Math.random() * 3)];=
}

Only one component in Angular is utilizing the scss design

Answer №1

Similar questions

Ensure that any relevant information is placed adjacent to a floated image

Tips for customizing tab pane color using HTML/CSS

The top margin function is ineffective on Internet Explorer 8

Testing the angular unit for a partially functioning ternary condition

What causes the discrepancy between a website's source code and the code viewed in the browser inspection tool? (Regarding web scraping)

Analyzing HTML content (not properly formatted) using JSoup

What is the best way to maintain the order of variadic types for conditionally inferred conditional types?

How can you retrieve the user that is currently signed in using AngularFire and Firebase Authentication in Angular?

What is the process of incorporating external links into an angular application?

Exploring the possibilities of combining Angular-CLI and the latest Bootstrap

When selecting an input within a div, the Angular onblur function is behaving erratically

Verify if the web application is in full-screen mode

Creating a personalized event using typescript

What is the reason for WordPress theme CSS and JS files loading after the head tag?

Responsive Button Sizing with Bootstrap 4

Are there any real-world examples you can share of utilizing CSS 3D Transforms?

npm error - The module './selenium-webdriver/lib/input' cannot be located

Achieving equal height in Bootstrap columns

What is the best way to ensure a dropdown menu stays visible while navigating through various If/Else blocks?

What might be causing my website to appear differently on mobile devices?