Ion-datetime-button - How to change the text to "Undefined" if null/unset in the ngModel?

Ionic Framework
1

Hi:

There is a way of toggle with ngIf to other element. But it needs more code.

What’s the correct way?

2

i’m not sure i’ve understood your question.
Are you asking to do something like this?

   <div *ngIf="aValueToCheck; else elseBlock">Text to show as first case</div>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
3

Hi: No:

  <ion-datetime-button datetime="adate"></ion-datetime-button>
  <ion-modal [keepContentsMounted]="true">
    <ng-template>
      <ion-datetime id="adate" [(ngModel)]="someDate"></ion-datetime>
    </ng-template>
  </ion-modal>

If “someDate” is Null/Unset/Undefined then the ion-datetime-button component will have the text: “Undefined” or “Infinity” or “Blah”.

4

I don’t think you can write that value
you need to style your own component and do the trick with the code i gave you before:

 <span *ngIf="someDate != null && someDate != undefined"; else elseBlock">Text to show as first case</div>
    <ion-datetime-button datetime="adate"></ion-datetime-button>
    <ion-modal [keepContentsMounted]="true">
      <ng-template>
        <ion-datetime id="adate" [(ngModel)]="someDate"></ion-datetime>
      </ng-template>
    </ion-modal>
</span>

<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
5

Hi: 10x for your help & time.
Didn’t want to handle more element so I used the css part

I did it with css parts:

ion-datetime-button.my-class::part(native) {
font-size: 0;
&:before {
content: “blah”;
font-size: 14px;
}
}

but the font-size hack was a bit hacky becuase it should be inherited instead of being fixed/hardcoded.

Hope they will add the option to change it in the future or at least do a css part on the slot child of the ::part(native) because I could not target it.

6

ok! let me know if you need anything else,

bye =)

7

Yes. I need help with this:

https://forum.ionicframework.com/t/ion-datetime-button-inside-modal-backdrop-doesnt-appear/230868

8

Thank you for your help but I just found an answer for that link to. So, Never mind it, I had the solution.