Text formatting?

Ionic Framework ionic-v3
1

Scratch the original query - I realise Android and iOS behaviours is supposed to be different.

Can you help with something else?

Can I format text? e.g for this:

{
				title:	'Roast Chicken Thighs',
				ingredients: '8 Chicken Thighs\<br> 1 medium onion\r 6 garlic cloves\r 2 preserved lemons \r 200 g pitted olives, green or black',
				method: 'Blend the onion, garlic, lemons and 150g of the olives\r Marinate the chicken in the blend for 2 hrs\r Roast in the oven for 1 1/2 hrs at 180 degrees C with the rest of the olives. Serve.'
			}

you can see want some line breaks.

How can I do this?

2

Don’t use <br>. Read about the CSS white-space property.

1 Like
3

Yeah, that works, thanks.

It’s a bit odd in Ionic but it’s kind of working.

I need to dynamically add HTML as well though. Is there a way to do that?

4

Pretend there isn’t. You’ll be happier in the long run.

5

Maybe, but I really need to! I’m pulling in JSON that needs to be reformed into ion-cards!

6

I would recommend you spend your effort in trying to come up with a solution that leaves all the HTML in templates, not in controller code.

7

Just add in JSON what you need to format on ion-card.
JSON

{
  "name": "Alejandro Rivera",
  "occupation": "Engineering System student",
  "work": "backend developer",
  "photo": "url.com/user/id?photo=1"
}

ion-card

<ion-card>
  <img src="{{user.photo}}" />
  <h2>{{user.name}}</h2>
  <p>{{user.occupation}}</p>
  <p>{{user.work}}</p>
</ion-card>
8

I don’t think this will work without box binding: [src]. You also don’t need the closing slash in HTML5 (it doesn’t hurt anything, it’s just meaningless).

9

Oh, I forgot this, I thought that I did put src="{{user.photo}}", that’s because I didn’t put [src].

10

This is what I’m doing now, but my content isn’t as formatted as that. I need to be able to generate different html tage.

11

I think it’s going to have to be document.write again :grinning:

12

This is a huge mistake, and if you’re going to keep fiddling with the DOM behind Angular’s back, I would suggest looking for a different framework, because you are going to keep running into trouble with this one.

13

So how do I get this content into the app?

I need to be able to upload it to (for example) Firebase and then the users DL it and repopulate the content.

Eg. A recipe for chicken that I improve. The new version of the recipe may have different HTML formatting.

14

As I have said over and over again, send the content in an intermediate format that can be rendered in the template. Do not use HTML.

15

Well at the moment I’m doing what rtalexk said. It works well. I wish I could use that all the time.

Believe me - I’d rather not manipulate the HTML.

You say use an intermediate format but this is what I’m asking - what and how? I’m clearly missing a bit of the puzzle here.

Here are some examples. I could have one page that has:
Title
SubTitle
Content
Img
Content
Subtitle
List

Then another that has
Title
SubTitle
List
Subtitle
List
Subtitle
List
Boxout
Img
Subtitle
Content
Links

These just won’t fit into the same template :frowning:

16

Says who? You just defined your intermediate format.

export interface Block {
  flavor: 'title' | 'subtitle' | 'content' | 'img' | 'list' | 'listitem' | 'boxout' | 'links' | 'link';
  contents: string | Block[];
  description?: string;
}

export interface Product {
  blocks: Block[];
}

products:Product[] = [
  {blocks: [
  {flavor: 'title', contents: 'Title'},
  {flavor: 'subtitle', contents: 'Subtitle'},
  {flavor: 'content', contents: 'Content'},
  {flavor: 'img', contents: 'http://url/img.png'},
  {flavor: 'content': contents: 'Content'},
  {flavor: 'subtitle', contents: 'Subtitle'},
  {flavor: 'list', contents: [{flavor: 'listitem', contents: 'li1'}]},
  ]},
  {blocks: [
  {flavor: 'title', contents: 'Title'},
  {flavor: 'subtitle', contents: 'SubTitle'},
  {flavor: 'list', contents: [{flavor: 'listitem', contents: 'li1'}]},
  {flavor: 'boxout', contents: 'Boxout'},
  {flavor: 'img', contents: 'http://url/img.png'},
  {flavor: 'subtitle', contents: 'Subtitle'},
  {flavor: 'content', contents: 'Content'},
  {flavor: 'links', contents: [{flavor: 'link', contents: 'http//url', description: 'cool link'}]},
  ]},
];

<ion-card *ngFor="let product of products">
<ng-template ngFor let-block [ngForOf]="product.blocks">
<h1 *ngIf="block.flavor === 'title'">{{block.contents}}</h1>
<h2 *ngIf="block.flavor === 'subtitle'">{{block.contents}}</h2>
<span *ngIf="block.flavor === 'contents'">{{block.contents}}<span>
<img [src]="block.contents" *ngIf="block.flavor === 'img'">
<ul *ngIf="block.flavor === 'list'">
  <li *ngFor="let li of block.contents">{{li.contents}}</li>
</ul>
<div class="boxout" *ngIf="block.flavor === 'boxout'">{{block.contents}}</div>
<div class="links" *ngIf="block.flavor === 'links'">
  <div *ngFor="let link of block.contents">
    <a [href]="block.contents">{{block.description}}</a>
  </div>
</div>
</ng-template>
</ion-card>
17

How do I get a beer to you?

I could do this even simpler - multi-dimensional arrays (only because I don’t quite get Interfaces).

See - it’s those ng ifs, there are essentially the HTML creators I was talking about.

18

I guess that depends on how you define “simpler”. If you think it’s “simpler” to just write machine opcodes, then raw untyped multidimensional arrays are the way to go. Personally, I like code that is strongly typed, because it makes me much more productive and makes my code much more self-documenting, which benefits whoever has to maintain it later, which is usually me in a year after I’ve forgotten everything about it. TypeScript interfaces do not have a very steep learning curve, and I think it’s well worth becoming familiar with them.

19

You are absolutely right.

You know, Ionic is great but I keep finding things about it that I struggle with. Stuff I used to do with jQuery Mobile that was easy.

And then someone shows me the way and I realise, again, how much better it is!

20

Does this work when you don’t know in advance the order and number of the blocks favours?

I have a string from a database, something like

blabla <span class="blur"> text1 </span> blabla...<span class="blur"> text2 <span>....

I want the user to be able to toggle the blur class on click… But I don’t know how many spans I have ?

(In fact, I made it work with a hard coded vanilla javascript substitution in the database, but it’s so ugly I wonder if there is a nice way to do it…)