Блог

У меня есть стиль, который я хочу применить к элементу только тогда, когда его состояние «фокус». Большинство цветов для этого сайта взяты из API, поэтому я добавляю их там, где это необходимо, с помощью ngStyle, который отлично работал до тех пор, пока мне не понадобился только один, применяемый при фокусировке в текстовом поле.

 <div class="form__group__full">
    <input type="text" class="form__field" id="callbackName" [(ngModel)]="name" placeholder="e.g. John" 
    [ngStyle]="{'color': brand?.colours.primary, 
                  'border-bottom': '2px solid '   brand?.colours.secondary, 
                  'border-image:focus': 'linear-gradient(to right, '   brand?.colours.primary   ', '   brand?.colours.secondary   ')'}">
    <label for="callbackName" class="form__label">Name</label>
</div>
  

Свойства border-bottom и color работают нормально, но свойство border-image было просто ударом в темноте, если честно — как я могу применить стиль динамически, только когда объект находится в состоянии фокусировки и без вызова предопределенного класса в таблице стилей?

Вы могли бы ввести логический флаг (например. focus ) в контроллере и использовать его для установки стилей. Настройте focus флаг на основе focus и blur событий.

Попробуйте следующее

Контроллер

 export class SampleComponent {
  focus = false;    // <-- default value
  ...
}
  

Шаблон

 <div class="form__group__full">
  <input (focus)="focus=true" (blur)="focus=false" type="text" class="form__field" id="callbackName" [(ngModel)]="name" placeholder="e.g. John" 
    [ngStyle]="focus ? {'color': brand?.colours.primary, 
                'border-bottom': '2px solid '   brand?.colours.secondary, 
                'border-image:focus': 'linear-gradient(to right, '   brand?.colours.primary   ', '   brand?.colours.secondary   ')'} : ''"
  >
  <label for="callbackName" class="form__label">Name</label>
</div>