hello,
i need to display strings which get loaded from a database inside a ion-label element.
how can i display newlines? “\n” is not working out of the box.
thanks!
thanks. but messing with that unfortunately brings up issues in nearly all components…
Please look at this from the point of view of somebody trying to help you. Did your last post provide any useful information? What would you want to know?
Do you mean you want to show strings in different lines? If that’s what you want, then doesn’t <ion-label>First<br/>Second<br/>Third</ion-label> work?
1 Like
@KishuPro:
the strings come loaded from a provider who gets them from a database, so my code would look like:
<ion-label>{{iProvideStringsFunction("i_am _a_string_key")}}</ion-label>
in that context newlines are not displayed.
What I understand is that you want to split the string you are getting from this function iProvideStringsFunction("i_am _a_string_key"). If this is the case, then you’ve to have access to the way these strings are being made and delimit the string tokens with a delimiter character. Then when showing them, split them and use <br/> to show each one on its own line.
Better still, make an array of string tokens.
I respect @KishuPro, but I stand by my initial comment. There is no need to overthink this. A CSS class with white-space: pre-line solves this.
3 Likes
Hey @rapropos thanks! But, what I understood is that @zantafio is getting a string through the function and wants to split it into multiple lines. If that’s the case then css won’t work there. But I may be wrongly guessing what he/she needs!
@KishuPro Well, no thats not what i meant.
the function iProvideStringsFunction(key) would look up and return the value for the key ( in my example “i_am _a_string_key” ) in a database.
This string then might contain a desired llinebreak.
as in (simplified!):
iProvideStringsFunction(key):string{
return this.database[key];
}
@rapropos
i tried:
ion-label{
white-space: pre-line!important;
}
and a “\n” still displays as “\n”
Well then, I am sorry I misunderstood and still am not clear exactly what you need. I think @rapropos gave you the best advice!
I think you should provide an example of the string you are getting and how you want it to be actually shown in the label.
Exactly! For me this is a simple case of splitting a string, but I am new to Ionic so I might be missing something. Please don’t get confused with my response!
i checked again, and it seems that there is some issue with the encoding when the string is read from the database. even though it displays as “hello\nworld” in the console, it does not render as such in html.
however setting
ion-label{
white-space: pre-line!important;
}
messes up the amongst other things the menu ion-list display’s top and bottom margin.
1 Like
I don’t know how capable CSS Utilities are in this case, but if you ask me I’d split the string like this:
<ion-label>
<div *ngFor="let str of iProvideStringsFunction('i_am _a_string_key').split('\n')">
{{ str }}
</div>
</ion-label>
This will split the string wherever it finds a ‘\n’ newline character.
This is because HTML doesn’t understand '\n' to be a <br/> as such.
Isn’t there a way to apply the css to just the relevant part of the code?
the client wants full control over the application strings. so it has to work everywhere.
I’m skeptical that the string is really what you say it is. Are you sure the backslash isn’t being escaped?
wstest(): string { return "hello\nworld"; }
<ion-label class="ws">{{wstest()}}</ion-label>
.ws {
white-space: pre-line;
}
hello
world
4 Likes