can I use angular2 and Thymeleaf together?

Question

I put the Thymeleaf th: in angular2 templates, but the th: wont compile. Is there any way I can use them together?

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'


@Component({
     selector: 'my-app',
     template: `
     <table xmlns:th="http://www.w3.org/1999/xhtml">
         <tbody>
            <tr>
                <th>User Name</th>
                <th th:each="role : ${roles}">
                   <div class="row">
                       <div th:text="${role.type}"></div>
                   </div>
                </th>
            </tr>
        </tbody>
    </table>`,
    })
export class App {}

Answer 1

You're mixing two frameworks for frontend together. Angular is frontend framework processed at client side, on the other hand Thymeleaf is processed server side.

You have two options:

• Use Angular and (for example) Spring together, where you'll use REST API to expose data from backend to Angular (frontend), and then you'll use *ngFor directive.

• Use Thymeleaf with frameworks such as Spring MVC or Spring Webflow etc. (It's also possible to use Angular here but you have to know that Thymeleaf is processed server side, so you can't put Thymeleaf code to JavaScript file and expect that it gets processed).

Answer 2

Yes, you can use Angular and Thymeleaf together. In your code, you have put the layout info into the javascript, which is not a good practice; you should pull it out from javascript code and make it a html template. You would need to pay attention to where to put the html template. Please check my post at here:

Make Spring Thymeleaf work with AngularJS routeProvider