https://github.com/manekinekko/angular-twig
Twig template engine support for Angular
https://github.com/manekinekko/angular-twig
angular decorators template-engine twig twig-templates
Last synced: 12 months ago
JSON representation
Twig template engine support for Angular
- Host: GitHub
- URL: https://github.com/manekinekko/angular-twig
- Owner: manekinekko
- Created: 2016-02-16T22:14:20.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-02-02T16:46:48.000Z (over 8 years ago)
- Last Synced: 2025-05-16T04:14:13.792Z (about 1 year ago)
- Topics: angular, decorators, template-engine, twig, twig-templates
- Language: TypeScript
- Homepage:
- Size: 7.81 KB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular2 ♥ Twig
This (WIP...) experiment is an attempt to add Twig templating support for Angular v2+
### Install
```
yarn add @manekinekko/angular-twig
```
or
```
npm i -S @manekinekko/angular-twig
```
### Setup with Angular-cli
Import the `twig` library into your `.angular-cli.json` file:
```json
"scripts": [
"../node_modules/twig/twig.min.js"
],
```
### How to use
```javascript
import { Twig } from '@manekinekko/angular-twig';
```
The `@Twig` decorator supersedes the `@Component()` decorator. **Don't use both!**
#### Use a `templateUrl`
```javascript
@Twig({
templateUrl: 'templates/field--comment.html.twig',
// -or- template: '',
context: {
title: 'Angular2 ❤ Twig',
content_1: 'content 1',
content_2: 'content 2'
},
selector: '#block-content',
})
export class AppComponent {}
```
#### Use an inlined `template`
```javascript
@Twig({
template: `
{% if title %}
{{ title }}
{% endif %}
{{ content_1 }}
{% if content_2 %}
{{ content_2 }}
{% endif %}
`,
context: {
title: 'Angular2 ❤ Twig',
content_1: 'content 1',
content_2: 'content 2'
},
selector: '#block-content',
})
export class AppComponent {}
```
### Live Example
Checkout this [plnkr](http://plnkr.co/edit/K0MohmywZpn5aSVHtYad?p=preview) for a quick demo.
### Acknowledgments
The Twig templates are parsed using (a modified version of) the [twig.js](https://github.com/justjohn/twig.js) library from [@justjohn](https://github.com/justjohn). All credits go to him for the parser.
### License
The MIT License