How to use Django templating inside Angular 2 template? [duplicate]

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
– Jitendra Tiwari, Commented May 12, 2016 at 7: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. — Reckonsys
– Reckonsys, Commented May 12, 2016 at 7:28

user5662309 · Accepted Answer · 2016-05-12 10:42:02Z

0

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>

answered May 12, 2016 at 10:42

user5662309

Sign up to request clarification or add additional context in comments.

Comments

sahuk · Accepted Answer · 2016-05-12 07:26:04Z

0

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

answered May 12, 2016 at 7:26

sahuk

911 silver badge6 bronze badges

3 Comments

Reckonsys Over a year ago

This works if I am trying to show angular stuff in Django template. What I want to implement is just the opposite.

sahuk Over a year ago

Do you want to generate Django templates in the browser using Angular 2 and send those to be parsed by the server?

Reckonsys Over a year ago

Yes. Like I have shown in the code snippet above.

Aswin Kumar K P · Accepted Answer · 2016-08-21 07:13:06Z

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, 2016 at 7:13

Aswin Kumar K P

1,1122 gold badges12 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to use Django templating inside Angular 2 template? [duplicate]

3 Answers 3

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Linked

Related