如何根据组件内容的可见性，有条件地将 styles 应用到组件标签上？

Question

Let's say I have a component like this which contains logic to show or hide the contents inside the component:

@Component({
  selector: 'hello',
  template: `<div *ngIf="visible"> <h1>Hello {{name}}!</h1></div>`,
  styles: [`h1 { font-family: Lato; } div { border: 1px solid blue }`]
})
export class HelloComponent  {
  @Input() name: string;
  visible: boolean;
  ngOnInit() {
    this.visible = this.name === "Stranger"
  }
}

And I use it like this in another component:

<div class="container">
  <hello class='hello-class' name="Stranger"></hello>

  <!-- This will not be visible -->
  <hello class='hello-class' name="Not stranger"></hello>
</div>

And I apply some styles to the hello components like this:

.hello-class {
  display: block;
  margin-bottom: 80px;
}

The 2nd use of hello component will be invisible because of the conditions in the component. But even if the component is invisible the styles I added to hello-class gets applied to the component.

I cannot move the condition to show/hide the component to the parent. So I cannot do an *ngIf before the component.

Is there any way I can apply this style only if the component is visible?

Here's a link to stackblitz illustrating the issue: https://stackblitz.com/edit/angular-ivy-mfrb7j

Answer 1

Since there are no children, you can do this with a css selector:

.hello-class:not(:empty) {
  display: block;
  margin-bottom: 80px;
}

By using :not(:empty) it checks if the element (the host element for the component) has children. If it doesn't have children, then the style won't apply.

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Answer 2

Conditional styling with ngClass would work in this situation also.

So in your HTML you would put:

<div class="container">
  <hello [ngClass]="{'hello-class': visible}" name="Stranger"></hello>

  <!-- This will not be visible -->
  <hello [ngClass]="{'hello-class': visible}" name="Not stranger"></hello>
</div>

So when visible = true, it will apply 'hello-class' styling.

---

Expanded answer below

Option 1:

Custom Property Binding & ngClass

hello.component.ts - make the "visible" property bindable in the parent component:

@Component({
  selector: 'hello',
  template: `<div *ngIf="visible"> <h1>Hello {{name}}!</h1></div>`,
  styles: [`h1 { font-family: Lato; } div { border: 1px solid blue }`]
})
export class HelloComponent  {
  @Input() name: string;
  @Input() visible: boolean;
  ngOnInit() {
    this.visible = this.name === "Stranger"
  }
}

parent.component.html - bind to the "visible" property of hello component and apply conditional styling with ngClass:

<div class="container">
  <hello [visible]="visibility" [ngClass]="{'hello-class': visibility}" name="Stranger"></hello>

  <!-- This will not be visible -->
  <hello [visible]="visibility" [ngClass]="{'hello-class': visibility}" name="Not stranger"></hello>
</div>

parent.component.ts - add the local property "visibility":

visibility: boolean;

Option 2

Local Reference & ngClass

Alternatively, if you cannot add anything to the parent.component.ts file, you can do it all in html. You don't need to add the @Input() decorator to your hello.component.ts file for this, either. Seems a bit rough, but it works.

parent.component.html - use local reference to trigger the conditions for ngClass:

    <div class="container">
  <hello #a [ngClass]="{'hello-class': a.visible}" name="Stranger"></hello>

  <hello #b [ngClass]="{'hello-class': b.visible}" name="Not stranger"></hello>
</div>

Answer 3

Append the name inputs for compponent to variables.

public helloNames = [ 'Stranger', 'Not stranger'];

Then in component, do as below.

<div class="container">
  <hello class='hello-class' *ngIf="helloNames[0] == 'Stranger'" name="helloNames[0]"></hello>

  <!-- This will not be visible -->
  <hello class='hello-class' *ngIf="helloNames[1] == 'Stranger'" name="helloNames[1]"></hello>
</div>