The child component properties are getting overlapped. Don't know why?-CodePudding

I am new to Angular. Tried to make a button/badge component. But when I am trying to use it more than one time, the css are getting overlapped and misbehaving. I think that when new instance of the badge component got created the second time, it overwrote on the first one, not sure.

app.html

<div >
  <app-badge [title]="'First'" [bgColor]="'Green'"></app-badge>
  <app-badge [title]="'Second'" [bgColor]="'Blue'"></app-badge>
</div>

badge.html

<div >
    {{title}}
</div>

badge.ts

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

@Component({
  selector: 'app-badge',
  templateUrl: './badge.component.html',
  styleUrls: ['./badge.component.css']
})
export class BadgeComponent implements OnInit {

  @Input()
  title : String="Badge";
  @Input()
  bgColor : String="";
  @Input()

  constructor() { }

  ngOnInit(): void {
    
  }

  ngAfterViewInit(){
    const ele = (document.getElementsByClassName('container')[0]);
    ele.setAttribute("style", `background-color:${this.bgColor};`);
  }

}

CodePudding user response：

Yes that's exactly what is happening like you explained, when second app-badge is rendered it will also overwrite the first one's background to blue.

First app-badge is rendered as Green. Then second app-badge is rendered as Blue.

When second blue app-badge is rendered you are effectively saying this: Take the first [0] element from container and set this background to this.bgColor which is Blue. So now the first app-badge which is green turns to blue and now their both blue.

 const ele = (document.getElementsByClassName('container')[0]);
 ele.setAttribute("style", `background-color:${this.bgColor};`);

I suggest you to remove document manipulation altogether:

  ngAfterViewInit(){
    const ele = (document.getElementsByClassName('container')[0]);
    ele.setAttribute("style", `background-color:${this.bgColor};`);
  }

And change the color in badge.component.html using NgStyle (I don't know what you have in there, but it would go something like this):

<div [style.background-color]="bgColor">

https://angular.io/api/common/NgStyle

CodePudding user response：

The problem is that your setting the background color for the first element with class name container here

const ele = (document.getElementsByClassName('container')[0]);

So in your example the div that contains both badges is painted blue, while the badges do not have background colors, since only the first element with class container in the DOM is selected every time.

To fix it update your badge.ts to remove ngAfterViewInit()

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

@Component({
  selector: 'app-badge',
  templateUrl: './badge.component.html',
  styleUrls: ['./badge.component.css'],
})
export class BadgeComponent implements OnInit {
  @Input()
  title: String = 'Badge';

  @Input()
  bgColor: String = '';

  constructor() {}

  ngOnInit(): void {}
}

and your badge.html to apply the bgColor using ngStyle:

<div [ngStyle]="{ 'background-color': bgColor }">
  {{ title }}
</div>

Working example