Doesn't render correctly when its loaded with [hidden]

[cerkiner]

On my use case, I need it to appear on certain event triggers, I am using [hidden] to render and load the events on page load and then I am programmatically making it visible when it is necessary. When it is visible the swipe, click and tap don't work and the styles are not the same with initially loaded version.

[twinssbc]

@cerkiner I think you need to use *ngIf instead of [hidden]. hidden attribute basically just adds the display:none to the DOM elements so the elements actually already exist. But I guess the underlying Swiper control needs to do some calculation for the DOM element width and offset, so it can't get proper result using the hidden elements. While ngIf generates the DOM elements completely, so no such issue.

[shalini-github]

hi @twinssbc I am using [ngIf]="uploadEvent == 'yes'" condition on ng-template. the calendar is not loading with day events. it loads if i remove ngIf condition.

[twinssbc]

@shalini-github if that's the case, I think it's related to your ngIf condition, uploadEvent == 'yes'.

[shalini-github]

I have two div elements one with calendar, ng-template. other one with some labels. ngIf condition is simple and the calendar div comes blank when i click on the segmentbutton. not sure what i'm missing here. please see my below sample code and screenshot

<ion-segment (ionChange)="segmentChanged()" [(ngModel)]="uploadEvent">
      <ion-segment-button value="yes">
        <ion-label>Events</ion-label>
      </ion-segment-button>
      <ion-segment-button value="no">
        <ion-label>Contact US</ion-label>
      </ion-segment-button>
    </ion-segment>

<ion-content #bodyElement id="contentC" class="content-bg">
  <div *ngIf="uploadEvent == 'yes'">
  <ng-template  #template let-displayEvent="displayEvent">
       <ion-row>
        <ion-col col-2>
          <div>Event {{displayEvent.event.title}}</div>
        </ion-col>
      </ion-row>
  </ng-template>

  <calendar [eventSource]="eventSource" [dayviewNormalEventTemplate]="template" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
    (onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)" (onTimeSelected)="onTimeSelected($event)"
    startHour="5" endHour="24" [scrollToHour]="calendar.scrollToHour" [preserveScrollPosition]="true" [locale]="calendar.locale">
  </calendar>
</div>
  <div *ngIf="uploadEvent == 'no'">
                <label text-wrap class="destination">{{location}}</label>
                <label text-wrap class="address">{{adderss}}</label>
  </div>
</ion-content>