将 Angular 组件输入参数传递给 CSS 的子 div

Question

I would like to set CSS based on an input on the div inside my component.

I pass parameters to my custom component with @Input and I would like to pass one of the parameters to the html like this:

the title works but the titletype I have no idea about

My component html:

<ion-input placeholder='Label'>
  <div class=label titletype= **the parameter from my .ts file**>
      {{title}}
  </div>
</ion-input>

And my CSS

.label[titletype=inborder] {
  padding: 4px;
  position: absolute;
  color: $textColor;
  margin-left: 13px;
  font-size: 12px;
  line-height: 16px;
  margin-top: -20px;
  background: white;
}

.label[titletype=corner] {
  padding: 4px;
  position: absolute;
  color: $textColor;
  float: right;
  font-size: 12px;
  line-height: 16px;
  right:5px;
  bottom: -24px;
}

Answer 1

You could have a better dev experience using NgClass :

<ion-input placeholder='Label'>
  <div [ngClass]="{'label-titletype-corner': yourProperty === 'corner', 'label-titletype-inborder': yourProperty === 'inborder', ...and so on}>
      {{title}}
  </div>
</ion-input>

with a simple adjustment to the ccs declarations as well:

.label[titletype=inborder], ,label-titletype-inborder {
 ...

.label[titletype=corner], .label-titletype-corner {
 ...

Answer 2

You can do it by class

.inborder{
  padding: 4px;
  position: absolute;
  color: $textColor;
  margin-left: 13px;
  font-size: 12px;
  line-height: 16px;
  margin-top: -20px;
  background: white;
}

.corner{
  padding: 4px;
  position: absolute;
  color: $textColor;
  float: right;
  font-size: 12px;
  line-height: 16px;
  right:5px;
  bottom: -24px;
}

Then based on the condition you can set the class in the div with title like this

<ion-input placeholder='Label'>
  <div class="label" [ngClass]="{'inborder': titletype=='inborder', 'corner': titletype=='corner'}">
      {{title}}
  </div>
</ion-input>

This would apply the style based on the input in the div if it is as

@Input() titletype:string;

Answer 3

Let's say that the @Input() property of your custom component is: @Input() myProp: string;

So in the html you can use interpolation.

<ion-input placeholder='Label'>
  <div class=label titletype={{ this.myProp }}>
      {{title}}
  </div>
</ion-input>

Also, if your @Input it's object instead of a string, you can evaluate his property to determinate which titletype you should show.

Example:

@Input() myObj: CustomClass;

html

<ion-input placeholder='Label'>
  <div class=label titletype={{ this.myObj.myProp === condition ? 'inborder' : 'corner'  }}>
      {{title}}
  </div>
</ion-input>