change the background color dynamically in ionic 3

Question

change the background color dynamically in ionic 3

Navigation

#1 by (0 votes)

2

Hi, I wanted to know how I can change the background color, with a button and tried this without any positive results:

HTML:

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding [ngClass]="{ classname:false }">
    The world is your oyster.
    <p>
        If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
    </p>

    <ion-buttons (click)="color()">
        <button>
        Hola
      </button>
    </ion-buttons>
</ion-content>

.TS

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  classname = false;
  constructor(public navCtrl: NavController) {

  }

  color() {
    console.log('Hola');
    this.classname = true;
  }

}

My SCSS.

page-home {
    .classname {
        Background: red;
    }
}

ionic-framework ionic3

asked by Ivan More Flores 03.11.2017 в 22:53

source

1 answer

How to save the state of a switch in a fragment? Android Populate Spinner from SQL

score 0 · Answer 1

Here is a example in Stackblitz

.HTML

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding [ngClass]="{ 'custom-class-name': newStyle }">
    The world is your oyster.
    <p>
        If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
    </p>

    <ion-buttons (click)="color()">
        <button ion-button>
          Cambiar color de fondo
      </button>
    </ion-buttons>
</ion-content>

.TS

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: ['./home.scss']
})
export class HomePage {

  newStyle = false;
  constructor(public navCtrl: NavController) {

  }

  color() {
    console.log('Hola');
    this.newStyle = !this.newStyle;
  }

}

.SCSS

.custom-class-name {
    background-color: red;
}