CODEWITHSUNDEEP
htmlcssangular
Mikulas Kopecky
Mikulas Kopecky

Reputation: 25

How to change style of a child angular component to be same size as another child component

I have been struggling with this for a quite some time now, and i couldn't find a sufficient answer. Basically i have one parent component which html goes as follows:

<div class="container">
    <child-one></child-one>
    <child-two></child-two>
</div>

the problem is that the child-one component has its size set as auto, with some padding to look good,

child-one {
    width: auto;
    height: auto;
    padding: 0.5rem;
}

and child-two has a fixed width and height in it's own scss.

child-two {
    width: 10rem;
    height: auto;
 }

is there a way to somehow change the width of child-two in the parent without editing the child-two?

I was hoping for something along the lines of storing the width of the child-one, and setting the width of child-two to the same value.

child-one { 
    width:auto;
    padding: 0.5rem;
    $width: this.width !global //idk about this one
 }

child-two {
    width: $width
    padding: 0.5rem
 }

please note that the child-one and child-two scss don't look this way in the code, and are normally written, this is just for the purpose of simplifying the question

Upvotes: 1

Views: 3571

Answers (2)

Grey
Grey

Reputation: 529

Suggestion

@SivakumarTadisetti's suggestion is a valid suggestion, alternatively, you could use ngStyle to provide dynamic styling for the component or ngClass for conditionally applying style class to the component. You could, which requires more code, also write a directive that changes the style behaviour of the component based on certain conditions.

Example using ngStyle

https://stackblitz.com/edit/stack-help-01

Upvotes: 0

Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5041

Is this what you are looking for?

app.component.html - Parent Component

<child-one #childOne></child-one>
<child-two #childTwo></child-two>
<br>
<button (click)="changeWidth()">Change child two width</button>

app.component.ts

export class AppComponent {

  @ViewChild('childOne', {
    read: ElementRef
  }) childOne: ElementRef;
  @ViewChild('childTwo', {
    read: ElementRef
  }) childTwo: ElementRef;

  constructor(private renderer: Renderer2) {}

  changeWidth() {
    const childOneWidth = this.childOne.nativeElement.getElementsByClassName('child-one')[0].offsetWidth;
    const childTwoElement = this.childTwo.nativeElement.getElementsByClassName('child-two')[0];
    this.renderer.setStyle(childTwoElement, 'width', `${childOneWidth - 2}px`);
  }
}

Here is the working Stackblitz

Upvotes: 1

Related Questions