CODEWITHSUNDEEP
javascriptcssangulartypescriptsass
Bob
Bob

Reputation: 477

Override the style in one component A when the component B is present on the view - Angular

I have two components on same level: 

<app-parent>
    <app-component-a></app-component-a>
    <app-component-b></app-component-b>
</app-parent>

The Component-A:

Has the below styles:

:host {
    .container {
       height: 10rem;
     }
}

But I want to change the height of the container of the component-a, when the component-b is present on the view. So let's say the componen-b is hidden and the default height from above can be used, but when component-b is visible the style below should override the height given above.

height: 2rem;

Any suggestions on how to achieve this. I have tried using the below on component-b but it doesn't help:

:host-context(.container) {
 height: 2rem;
}

Have updated the code to make this work if there is a [ngClass] added to the code: 

<div class="container" [ngClass]="{'area-height': showArea}">

Adding the Stackblitz code for easy understanding

Now I want to see if there is a way if we can connect the boolean value from the other component? Added the random boolean generator, for now, to show/hide the component-b

Upvotes: 1

Views: 1153

Answers (4)

Lonli-Lokli
Lonli-Lokli

Reputation: 3766

Here is my stackblitz sample

https://stackblitz.com/edit/angular-components-styles-override-78a9ni

Actually all you need is to apply some class based on some compB property

Upvotes: 1

mykhailo.romaniuk
mykhailo.romaniuk

Reputation: 1088

Maybe you can handle it using simple CSS? For example, you can make different style in case if component-a is last-child(see your modified example here):

:host {
  .container {
    height: 10rem;
    background: blueviolet;
  }
  .area-height{
    height: 2rem;
  }
}

// if component-b is present
:host:not(:last-child) {
  .container {
    height: 2rem;
  }
}

Upvotes: 0

Jasdeep Singh
Jasdeep Singh

Reputation: 8301

you can definitely achieve this using :host-content provided by angular. Let say we have two components - component A and component B as we have in your requirement.

I am hiding component B from a button present in App component. Just toggle a css class to an ancestor of Component A in response to toggle of component B. I have created a stackblitz for you, please let me know if i am missing anything.

Stackblitz link- https://stackblitz.com/edit/angular-cfkqyt

Important code you need to look is below

// app component.ts

import {
  Component
} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  isBVisible = true;

  toggleB() {
    this.isBVisible = !this.isBVisible;
  }
}
/* Component A css */

.container-a {
  border: 1px solid red;
  height: 10rem;
}


/* apply css to component a if it finds bPresent css classname in its ancestor. */

:host-context(.bPresent) .container-a {
  height: 4rem;
}
<!-- app component html -->

<button (click)="toggleB()">toggle b</button>
<div [class.bPresent]="isBVisible">
  <comp-a></comp-a>
</div>
<div *ngIf="isBVisible">
  <comp-b></comp-b>
</div>

:

Upvotes: 0

Philip Antin
Philip Antin

Reputation: 136

Here are two possible solutions:

Solution A

REQUIREMENT: The display height of both components (when both are shown) is greater than or equal to 10rem

REQUIREMENT: When Component B is hidden, nothing is supposed to display in the area that it occupies when it is shown.

1) Wrap both components in a element with a fixed height equal to the height of Component B plus 2rem

2) Style Component A with a min-height of 2rem and a max-height of 10rem

RESULT: When Component B is hidden, Component A will take its full height of 10rem. When Component B shows, Component A will shrink to a minimum of 2rem.

Solution B

REQUIREMENT: There is (or could be) a property in the component that tracks the show/hide state of Component B

1) Use ngStyle on Component A in a manner similar to the following example:

<app-component-a [ngStyle]="{'height':isComponentBShown ? '2rem' : '10rem'}"><app-component-a>
<app-component-b [showArea]="isComponentBShown"><app-component-b>

RESULT: When the isComponentBShown boolean evaluates as true, the height of Component A is set to 2rem. It is set to 10rem otherwise.

Of the two, I would recommend Solution B.

Upvotes: 0

Related Questions