https://github.com/thescientist13/lit-angular

https://github.com/thescientist13/lit-angular

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/thescientist13/lit-angular
• Owner: thescientist13
• Created: 2020-04-04T21:49:24.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-04-05T15:07:41.000Z (over 4 years ago)
• Last Synced: 2024-10-29T03:41:51.904Z (about 2 months ago)
• Language: TypeScript
• Size: 279 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# LitAngular

This is an expiremental repo for seeing if there is a way to substitute Angular's default "proprietary" templating engine with something more JavaScript based, e.g. (tagged) template literals.  Using something like [lit-html](https://lit-html.polymer-project.org/).

Essentially, for a given `Component` like below:

```js

export class HerosComponent {

  title = 'Tour of Heroes';

  heroes = [{

    id: 1

    name: 'Windstorm'

  }, {

    id: 2

    name: 'Bombasto'

  }, {

    id: 3

    name: 'Magneta'

  }];

}

```

Instead of an Angular template like this:

```html

{{title}}

Heroes:



  


    {{ hero }}

  



```


You would be able to write it like this:

```html

${title}

Heroes:



  ${repeat(heroes, (hero) => hero.id, (hero, index) => html`

    
${index}: ${hero.name}

  `)}



```


## Setup

Run `yarn install`

## Commands

- Run `yarn start` to start a local dev server with live reload.

- Run `yarn build` to build the project.

- Run `yarn serve` to see a production build locally.

See this project's [_package.json_](./package.json) `scripts` for other default commands from the Angular CLI.

> This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.0..  DEV and PROD servers both run on `http://localhost:4200`.