How to use Django templating inside Angular 2 template?

Question

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?

You should call `categories` using `ngServices` and store data an array inside `ngModel`. — Jitendra Tiwari, May 12 '16 at 07:24
Even I thought of doing that but how do I get the categories object? there is no explicit api call for it. when the page is rendered I am passing it as a context. — Subhajit, May 12 '16 at 07:28

score 0 · Answer 1 · answered May 12 '16 at 07:26

0

Use the {% verbatim %} Django template tag and put your AngularJS template code between {% verbatim %} and {% endverbatim %}.

answered May 12 '16 at 07:26

sahuk

91
1
6

This works if I am trying to show angular stuff in Django template. What I want to implement is just the opposite. – Subhajit May 12 '16 at 07:29
Do you want to generate Django templates in the browser using Angular 2 and send those to be parsed by the server? – sahuk May 12 '16 at 07:58
Yes. Like I have shown in the code snippet above. – Subhajit May 12 '16 at 08:31

score 0 · Accepted Answer · answered May 12 '16 at 10:42

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>

score 0 · Answer 3 · answered Aug 21 '16 at 07:13

0

You can get both django and angular2 template working without any conflicts.

If you are using Jinja2, then you can easily change the variable start string in Jinja2 options.

Refer my blog post for more details.

answered Aug 21 '16 at 07:13

Aswin Kumar K P

1,023
2
12
21

How to use Django templating inside Angular 2 template?

3 Answers3

Linked