javascript - ionic 2 : hide and display div with ngClass

I have a div on my ionic 2 page and I want to display and hide it when click , the first part is done (display) I use ngClass to do it but the second part can't do it I think is a logic problem , see the image bellow :

, here is the html code :

<ion-content>
    <ion-fab right [ngClass]="isCalendar ? 'show-calendar':'hide-calendar' " (click)="showCalendar();">
        <div class="close" (click)="hideCalendar()" [ngClass]="isNotCalendar ? 'hide-Calendar' :'show-calendar'">
            <ion-icon class="icon-close" name="ios-close"></ion-icon>
        </div>
        <p class="day" [ngClass]="isClicked ? 'day-no-click':'day' ">DAY</p>
        <p class="month" [ngClass]="isClicked ? 'monthclicked':'month' " (click)="selectMonth()">MONTH</p>
        <p class="year">YEAR</p>
        <div class="button-date" ion-button round>
            <p>.&nbsp;.&nbsp;.</p>
        </div>
        <div class="Progress" style="transform: rotate(90deg);">
            <progress max="100" value="0" class="Progress-main">
                <div class="Progress-bar" role="presentation">
                    <span class="Progress-value" style="width: 80%;"></span>
                                               </div>   
            </progress>
        </div>

    </ion-fab>
    <ion-fab top left>
        <ion-searchbar> </ion-searchbar>
    </ion-fab>
    <ion-img class="map" [src]="mapsource" (click)="changeView(mapsource)"></ion-img>
    <ion-icon class="icon-bonfire" name="ios-bonfire"></ion-icon>
    <ion-icon class="icon-heart" name="md-heart"></ion-icon>
    <ion-icon class="icon-nuclear" name="md-nuclear"></ion-icon>
    <ion-fab top right (click)="showCalendar()">
        <button ion-fab color="whitecolor"><ion-icon class="calandaricon" name="md-calendar"></ion-icon></button>
    </ion-fab>
    <div class="calendar">

    </div>

    <ion-fab bottom right class="fablocate">
        <button ion-fab color="whitecolor"><ion-icon class="locateicon" name="md-locate"></ion-icon></button>
    </ion-fab>
    <ion-fab (click)="ListParrots();" bottom left class="linklist">
        <ion-img class="parrot-list-link" src="img/citydirty.jpg"></ion-img>
    </ion-fab>
</ion-content>

and here is the ts file code :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {ParrotListPage } from '../parrot-list/parrot-list';

/**
 * Generated class for the MapPage page.
 *
 * See  for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {

  mapsource :any;
  isClicked : Boolean= false;
  isCalendar : Boolean=false;
  isNotCalendar : Boolean=false;
  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.mapsource = '../../img/map.jpg';
  }

  changeView(mapsource){
    this.mapsource ='../../img/mapzoom.jpg';
    if (mapsource == this.mapsource) {
      this.mapsource = '../../img/map.jpg';
    }else{
      this.mapsource= '../../img/mapzoom.jpg';
    }

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MapPage');
  }

  ListParrots(){
    this.navCtrl.push(ParrotListPage);
  }

  showCalendar(){
    this.isCalendar = true;
  }
  hideCalendar(){
    this.isNotCalendar = false;
  }
  selectMonth() {

    this.isClicked = true;



  }

}

and here is the css

.show-calendar {
        height: 100%;
        width: 25%;
        background-color: color($colors, notification-blue);
        margin-right: -10px;
        z-index: 1000;
        text-align: center;
    }
    .hide-calendar {
        display: none;
    }
    .close {
        width: 50px;
        height: 50px;
        text-align: center;
        background-color: white;
        border-radius: 50%;
        line-height: 50px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }

can some check with the logic and tell how to define exactly the ngClass functionalities?

, here is the html code :

<ion-content>
    <ion-fab right [ngClass]="isCalendar ? 'show-calendar':'hide-calendar' " (click)="showCalendar();">
        <div class="close" (click)="hideCalendar()" [ngClass]="isNotCalendar ? 'hide-Calendar' :'show-calendar'">
            <ion-icon class="icon-close" name="ios-close"></ion-icon>
        </div>
        <p class="day" [ngClass]="isClicked ? 'day-no-click':'day' ">DAY</p>
        <p class="month" [ngClass]="isClicked ? 'monthclicked':'month' " (click)="selectMonth()">MONTH</p>
        <p class="year">YEAR</p>
        <div class="button-date" ion-button round>
            <p>.&nbsp;.&nbsp;.</p>
        </div>
        <div class="Progress" style="transform: rotate(90deg);">
            <progress max="100" value="0" class="Progress-main">
                <div class="Progress-bar" role="presentation">
                    <span class="Progress-value" style="width: 80%;"></span>
                                               </div>   
            </progress>
        </div>

    </ion-fab>
    <ion-fab top left>
        <ion-searchbar> </ion-searchbar>
    </ion-fab>
    <ion-img class="map" [src]="mapsource" (click)="changeView(mapsource)"></ion-img>
    <ion-icon class="icon-bonfire" name="ios-bonfire"></ion-icon>
    <ion-icon class="icon-heart" name="md-heart"></ion-icon>
    <ion-icon class="icon-nuclear" name="md-nuclear"></ion-icon>
    <ion-fab top right (click)="showCalendar()">
        <button ion-fab color="whitecolor"><ion-icon class="calandaricon" name="md-calendar"></ion-icon></button>
    </ion-fab>
    <div class="calendar">

    </div>

    <ion-fab bottom right class="fablocate">
        <button ion-fab color="whitecolor"><ion-icon class="locateicon" name="md-locate"></ion-icon></button>
    </ion-fab>
    <ion-fab (click)="ListParrots();" bottom left class="linklist">
        <ion-img class="parrot-list-link" src="img/citydirty.jpg"></ion-img>
    </ion-fab>
</ion-content>

and here is the ts file code :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {ParrotListPage } from '../parrot-list/parrot-list';

/**
 * Generated class for the MapPage page.
 *
 * See https://ionicframework./docs/ponents/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {

  mapsource :any;
  isClicked : Boolean= false;
  isCalendar : Boolean=false;
  isNotCalendar : Boolean=false;
  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.mapsource = '../../img/map.jpg';
  }

  changeView(mapsource){
    this.mapsource ='../../img/mapzoom.jpg';
    if (mapsource == this.mapsource) {
      this.mapsource = '../../img/map.jpg';
    }else{
      this.mapsource= '../../img/mapzoom.jpg';
    }

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MapPage');
  }

  ListParrots(){
    this.navCtrl.push(ParrotListPage);
  }

  showCalendar(){
    this.isCalendar = true;
  }
  hideCalendar(){
    this.isNotCalendar = false;
  }
  selectMonth() {

    this.isClicked = true;



  }

}

and here is the css

.show-calendar {
        height: 100%;
        width: 25%;
        background-color: color($colors, notification-blue);
        margin-right: -10px;
        z-index: 1000;
        text-align: center;
    }
    .hide-calendar {
        display: none;
    }
    .close {
        width: 50px;
        height: 50px;
        text-align: center;
        background-color: white;
        border-radius: 50%;
        line-height: 50px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }

can some check with the logic and tell how to define exactly the ngClass functionalities?

Share Improve this question edited Oct 23, 2018 at 6:44 Alex Kulinkovich 4,78815 gold badges50 silver badges54 bronze badges asked Oct 7, 2017 at 2:06 547n00n 1,5466 gold badges33 silver badges61 bronze badges

What do you want to show and hide? – Duannx Commented Oct 7, 2017 at 2:14
please see my edit question , you will see the div at the right side – 547n00n Commented Oct 7, 2017 at 2:16
Please point it out with a class name or id – Duannx Commented Oct 7, 2017 at 2:23
this is it : <ion-fab right [ngClass]="isCalendar ? 'show-calendar':' – 547n00n Commented Oct 7, 2017 at 2:39
1 So just set this.isCalendar = false; in hideCalendar() – Duannx Commented Oct 7, 2017 at 2:47

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

Try like this :

<button class="btn btn-primary" (click)="showCalendar()">showCalendar</button>

<div [ngClass]="isCalendar ? 'show-calendar':'hide-calendar'">
    <h1>Calendar Content</h1>
</div>

and method :

export class Component {

    private isCalendar: boolean = false;

    showCalendar() {
        this.isCalendar = this.isCalendar ? false : true;
    }
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - ionic 2 : hide and display div with ngClass - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)