Subhajit Subhajit - 3 months ago 20
TypeScript Question

How to use Django templating inside Angular 2 template?

I am trying to iterate through a django object rendered to an HTML page by the view.
I defined an Angular 2 component in the following manner :-

@Component({

selector: 'search',
template:`

<form [ngFormModel]="form" >
{% for category in categories_all %}
<li>
<div class="checkbox">
<label>
<input type="radio" name="category"
id="category_{{category.id}}"
value="{{category.name}}"
ngControl = "category"
#category="ngForm"
{% ifequal category.id|stringformat:"s"
param_values.category_id|stringformat:"s" %}
checked="checked"
{% endifequal %}
(click)="onClick()">
{{category.name}}
</label>
</div>
</li>{% endfor %}
</form>
`,
providers:[ HTTP_PROVIDERS]


})


{% for category in categories_all %}
is django templating syntax so angular2 is not identifying it. Is there any way to resolve this issue?

Answer

you should define your own template tags like this

AngularJS module (app.js)

angular.module('myapp', []).config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

Webpage

<a>[[ variable ]]</a> 
Comments