Dynamic angular 2 expressions bind to view

Question

I am fetching part of the page from some service. How can I achieve that angular expression or router staff working as dynamic content?

Controller.ts

 variable = 'some text';
 dynamicContent ='
     {{variable}} 
     Or
     <a  [routerLink]="contact"]></a>';

View.html

<div>
     {{dynamicContent}}//plain text 
     <div [innerHtml]="dynamicContent"></div> //html without angular expressions
</div>

So innerHtml is close. It can build html but cannot understand angular 2 expressions. I found out ng-dynamic module but it also undesrstand only html. The best solution atm is html outlet that i found on some stack questions. But it is not supporting AOT...

Check this http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2 — BotanMan, Feb 16 '17 at 08:47

score 0 · Answer 1 · edited May 23 '17 at 12:17

0

Angular never processes dynamic content, except stripping some security relevant stuff if not sanitizized. Angular bindings and components are only processed when added to a components template statically.

You can create a component dynamically where you put the dynamic content into them components template

See also Equivalent of $compile in Angular 2

edited May 23 '17 at 12:17

Community

1
1

answered Feb 16 '17 at 08:49

Günter Zöchbauer

623,577
216
2,003
1,567

it seems that it can be solution. Only question is how it is supporting AOT. I ll check it out – user2771738 Feb 16 '17 at 09:54
I don't know. The last thing I heard was that it doesn't work with AoT when the browser-dynamic platform is imported which is required here. – Günter Zöchbauer Feb 16 '17 at 09:58

sanyooh · Answer 2 · 2017-02-16T10:01:32.830

0

You should write it like this:

dynamicContent = this.variable + ' Or <a href="#/contact"></a>';

Here is a plunker: https://plnkr.co/edit/EqJRUs3mGKwjnXzbuwAo?p=preview

edited Feb 16 '17 at 10:01

answered Feb 16 '17 at 08:52

sanyooh

1,260
2
18
31

in your plunker you are using pure html Go to Site which is working fine like I said. Problem is when I am trying to have angular 2 way links: – user2771738 Feb 16 '17 at 09:37
still pure html in variable: dynamicContent = '' + this.variable + ' CrisisCenter'; In my case I am using html 5 push state. My links not using # notation. This was like workaround a littlebit. dynamic content need to be placed in angular notation like: – user2771738 Feb 16 '17 at 12:31

Dynamic angular 2 expressions bind to view

2 Answers2