CSS class styles not applied to ion-input native element using getInputElement and Renderer2

I cannot seem to get any CSS classes’ styles applied to an input element in ion-input. Here’s a simple example of what I am trying…

home.page.ts

<ion-content>
  <ion-item>
    <ion-input #ioninput placeholder="Ion Input" ></ion-input>
  </ion-item>

  <input #normalinput placeholder="Normal input" type="text">
</ion-content>

home.page.scss

.aqua-marine{
  background-color: aquamarine;
}

home.page.ts

import { Component, AfterViewInit, ElementRef, ViewChild, Renderer2 } from "@angular/core";
import { IonInput } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit {
  @ViewChild("ioninput") ionInputExample: IonInput;
  @ViewChild('normalinput', { read: ElementRef }) normalInputExample: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {
    this.ionInputExample.getInputElement().then(nativeInputInsideIonInput => {
      this.renderer.addClass(nativeInputInsideIonInput, "aqua-marine");
      console.log('ion-input: ', nativeInputInsideIonInput);      
    });

    const ni = this.normalInputExample.nativeElement;
    this.renderer.addClass(ni, "aqua-marine");
    console.log('ni: ', ni);
  }
}

The console logs are showing that each class has been added to each element but only the native input is applying the class’s styles. As the example shows I can successfully use Renderer2’s setStyle method but not the addClass.

I’m stumped. Any thoughts or suggestions are appreciated.

1 post - 1 participant

Read full topic