Передать входной параметр компонента Angular дочернему элементу div для CSS

Question

Я хотел бы установить CSS на основе ввода в div внутри моего компонента.

Я передаю параметры своему пользовательскому компоненту с помощью @Input и хочу передать один из параметров в html, напримерэто:

заголовок работает, но тип заголовка я понятия не имею о

Мой компонент html:

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

И мой 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

Вы можете сделать это по классу

.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;
}

Затем, основываясь на условии, вы можете установить класс в div с заголовком следующим образом:

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

Это применило бы стиль на основена входе в div, если оно равно

@Input() titletype:string;

Answer 2

Вы можете получить лучший опыт разработки, используя NgClass :

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

с простой настройкой также объявлений ccs:

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

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

Answer 3

Допустим, что свойство @Input () вашего пользовательского компонента имеет вид: @Input () myProp: string;

Так что в html вы можете использовать интерполяцию.

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

Кроме того, если ваш @Input это объект вместо строки, вы можете оценить его свойство, чтобы определить, какой тип заголовка вы должны показать.

Пример:

@ Input () myObj: CustomClass;

html

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