Wish Angular 4 had One time binding

The biggest feature I really miss with Angular 2 &4 is one time binding - especially when using *ngfor loop.

The result is that loading pages is very slow as one page I use has 11 dom refreshes - even the sample tab app has 3 dom refreshes per page.

Is it possible to tell Angular with *ngfor the data is static and will not change?

onPush change detection might be what you’re looking for.

check the comment from dawidgarus on this link -

Many thanks @AaronSterling and @Dbms onPush change detection was the solution which made things go a lot faster.

It took a bit to get my head around it -but is now working fine.

Ionic should include it in the documentation as I seen a lot of posts about pages being slow to load.

In most situations, I think a more robust approach is to make change detection as cheap as possible. Make template expressions very simple and idempotent. I don’t think onPush should be employed commonly.

I don’t know if it’s related, but I think I have a dom refresh problem… Perhaps you have an idea ??

I want to get from a dataservice some text which includes svg like this :
....text <div class="MathJax_SVG_Display" style="text-align: center;"><span style="font-size: 100%; display: inline-block;" class="MathJax_SVG" id="MathJax-Element-1-Frame"><svg xmlns:xlink="http://www.w3.org/1999/xlink" width="4.15ex" height="5.176ex" style="vertical-align: -1.838ex;" viewBox="0 -1437.2 1787 2228.5" role="img" focusable="false"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g transform="translate(120,0)"><rect stroke="none" width="620" height="60" x="0" y="220"></rect><use x="60" y="676" xlink:href="#STIXWEBMAIN-31"></use><use x="60" y="-697" xlink:href="#STIXWEBMAIN-32"></use></g><g transform="translate(860,0)"><use x="213" y="0" xlink:href="#STIXWEBMAIN-32"></use><use x="0" y="728" xlink:href="#STIXWEBMAIN-2192"></use></g></g></svg></span></div> text....

The dataservice gives the STIXWEBMAIN definitions that are called in the text :
<defs id="MathJax_SVG_glyphs"><path stroke-width="1" id="STIXWEBMAIN-31" d="M394 0h-276v15c74 4 95 25 95 80v449c0 34 -9 49 -30 49c-10 0 -27 -5 -45 -12l-27 -10v14l179 91l9 -3v-597c0 -43 20 -61 95 -61v-15Z"></path><path stroke-width="1" id="STIXWEBMAIN-32" d="M474 137l-54 -137h-391v12l178 189c94 99 130 175 130 260c0 91 -54 141 -139 141c-72 0 -107 -32 -147 -130l-21 5c21 117 85 199 208 199c113 0 185 -77 185 -176c0 -79 -39 -154 -128 -248l-165 -176h234c42 0 63 11 96 67Z"></path><path stroke-width="1" id="STIXWEBMAIN-20D7" d="M-17 654l-132 -106l-18 8c32 27 49 49 49 56c0 12 -16 15 -49 15h-286v54h286c28 0 49 2 49 15c0 9 -21 27 -50 56l18 8Z"></path><path stroke-width="1" id="STIXWEBMAIN-2192" d="M856 258v-10c-96 -41 -172 -115 -238 -191l-20 19c23 33 52 65 82 96c9 9 14 20 14 28c0 10 -8 20 -26 20h-598v66h599c10 0 26 12 26 22c0 9 -4 15 -14 25c-29 28 -60 63 -82 96l20 19c65 -75 141 -150 237 -190Z"></path></defs>

The problem is that when I hard code these definitions in the page.html it works, but when I want to put them in the page with
{{definitions}}
where I have in my page.ts
this.definition = <defs..../defs>;
It doesn’t work. I presume that is because they arrive too late ? How to get them loaded before the text is called ? Or is it another issue?

I’m really stuck !