Angular scss design works only on one component

Question

I have a component, which creates many buttony next to each other. They all need to have a certain style to them. They also all have a different color randomly assigned to them based on their class.

My problem now is, that when I add the component to one of my other component html files, it works just as I want it to. But if I want to add it to another one, the design is completely off

Just as the css isnt working on the other components..

But it is still the same code, because it's an imported component. So I dont' get how it doesn't work...

Here 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 parent component is status.component, which imports all the other ones. That's where the status-modules are as well.

I hope anyone has an idea on what the solution could be.

Answer 1

You're mixin the concept of ngStyle, ngClass and the property className

You can use

<!--see that it's 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>

And

  getClassrandom(): string{
    const classesArray = [
      'status__button status__button--red',
      'status__button status__button--yellow',
      'status__button status__button--green'];
    //see that return a string, not change the "clasname"
    return classesArray[Math.floor(Math.random() * 3)];
  }

BTW: Instead pass the index "i" and use document.getElementById, (If you has any element with the same "id" the app crash) You can use a template reference variable

<div *ngFor="let button of [1,2,3,4,5,6,7,8,9,10]; index as i">
    <!--NOTE that it's an example, you should not use [ngStyle]-->
    <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)];
  }

Well, really use a function in a *ngFor is not a great idea. You can use ViewChildren

@ViewChildren('buttonstatus') buttons:QueryList<ElementRef>
//and in ngAfterViewInit
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)];=
}