3

Hola queria saber como puedo cambiar el color de fondo, con un boton e intentado esto sin resultados postivos :

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

}

Mi SCSS.

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

1 respuesta 1

0

Aqui tienes un ejemplo en 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;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.