ion-input ohne ion-label

Author: MDecker-MobileComputing

src/app/hinzufuegen/hinzufuegen.page.html

@@ -14,17 +14,16 @@
   </p>
 
   <ion-item>
-    <ion-label position="fixed">Abkürzung:</ion-label>
-    <ion-input type="text" [(ngModel)]="abkuerzung"></ion-input>
+    <ion-input label="Abkürzung" type="text" [(ngModel)]="abkuerzung"></ion-input>
   </ion-item>
 
   <ion-item>
-    <ion-label position="fixed">Bedeutung:</ion-label>
-    <ion-input type="text" [(ngModel)]="bedeutung"></ion-input>
+    <ion-input label="Bedeutung" type="text" [(ngModel)]="bedeutung"></ion-input>
   </ion-item>
 
   &nbsp;
 
   <ion-button expand="block" (click)="onHinzufuegenButton()" >Speichern</ion-button>
 
-</ion-content>
+</ion-content>
+

src/app/home/home.page.ts

@@ -34,9 +34,12 @@ export class HomePage {
    */
   public async onSuchenButton() {
 
-    if (this.abkuerzung === null || this.abkuerzung === undefined || this.abkuerzung.trim().length == 0 ) {
+    if ( this.abkuerzung === null      ||
+         this.abkuerzung === undefined ||
+         this.abkuerzung.trim().length == 0 ) {
 
-      this.dialogToastHelferService.zeigeDialog("Ungültige Eingabe", "Bitte zu suchende Abkürzung eingeben!");
+      this.dialogToastHelferService.zeigeDialog( "Ungültige Eingabe",
+                                                 "Bitte zu suchende Abkürzung eingeben!" );
       return;
     }
 
@@ -52,7 +55,7 @@ export class HomePage {
 
           bedeutungenString += bedeutungenArray[i];
 
-          if (anzahl > 0 && i !== lastIndex) { bedeutungenString += ", "; }
+          if (anzahl > 0 && i !== lastIndex) { bedeutungenString += "\n"; } // siehe CSS-Definition in global.scss
         }
 
         const titel = `Ergebnis für "${this.abkuerzung}" (${anzahl}):`;

src/global.scss

@@ -35,3 +35,9 @@
 /* @import "@ionic/angular/css/palettes/dark.always.css"; */
 /* @import "@ionic/angular/css/palettes/dark.class.css"; */
 @import "@ionic/angular/css/palettes/dark.system.css";
+
+
+/** mehrzeilige Ausgaben in Alerts **/
+ion-alert .alert-message {
+    white-space: pre-line;
+}