Can anyone tell me what is the best practise to manipulate the style of an ionic v4 component only via angular code?

For example, the best practise to change only via angular code the background color of a ionic button after that it is clicked.

Thanks a lot!

1 Answers

0
Lados On Best Solutions

Change Ionic's CSS varibles

The easiest way is to do it via CSS variables.

Example to change a button:

<ion-button class="my-button">
    Click me
</ion-button>
.my-button {
  --background: blue;
  --color: red;
  --border-radius: 10%;
}

This would result into a button with a blue background, red text color and a border radious of 10%.

You can find the available CSS variables for each component in the docs: Button CSS Custom Properties

Or for example for ion-item: Item CSS Custom Properties

I hope this helps!

Dynamic CSS classes

TS Compoment:

export class AppComponent {

  isActive = true;

  constructor(
  ) { 
  }

  toggleActive() {
    this.isActive = !this.isActive;
  }
}

HTML template:

<ion-button [class.active]='isActive' (click)='toggleActive()'>
   Click to toggle color!
</ion-button>

CSS Style:

.active {
  --background: green;
}

For more powerful options refer to the NgClass Angular documentation pleaser