// main.ts
if (environment.production) { enableProdMode(); }
platformBrowserDynamic().bootstrapModule(AppModule);
// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [ BrowserModule,BrowserAnimationsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }
// app.component.ts
@Component({
  selector: 'app-root',
  template: `<h1>Hello World!</h1>`,
  styles: [`h1 { color: #c0ffee; }`]
})
export class AppComponent {}

// index.js
Vue.config.productionTip = false
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
// App.vue
<template><h1>Hello World!</h1></template>
<script>
export default { name: "app" };
</script>
<style scoped>h1 { color: #c0ffee; }</style>

// <todo [id]="todo.id" [text]="todo.text" [done]="todo.done"></todo>

@Component({
  selector: 'todo',
  template: `
    <mat-list-item (click)="onTodoClick()">
      <mat-checkbox class="checkbox" [checked]="done"></mat-checkbox>
      <div class="todo-text">{{text}}</div>
    </mat-list-item>`
})
export class TodoComponent {
  @Input() id: number;
  @Input() text: string;
  @Input() done: boolean = false;
};

<!-- <todo :text="todo.text" :done="todo.done"/> -->
<template>
  <v-content>
    <v-list-tile-action>
      <v-checkbox :input-value="done"></v-checkbox>
    </v-list-tile-action>
    <v-list-tile-content>
      <v-list-tile-title>{{text}}</v-list-tile-title>
    </v-list-tile-content>
  </v-content>
</template>
<script>
export default {
  name: "todo",
  props: ["text", "done"],
};
</script>

// <add-todo (newTodo)="AddTodo($event)"></add-todo>

@Component({
  selector: 'add-todo',
  template: `
    <mat-form-field (keydown.enter)="addTodo(todo)">
      <input #todo placeholder="Add a new todo">
    </mat-form-field>`
})
export class AddTodoComponent {
 @Output() newTodo = new EventEmitter();
 addTodo(todo){
   this.newTodo.emit(todo);
 }
};

// <add-todo v-on:new="newTodo"/>
<template>
  <v-text-field v-model="newtodo" @keydown.enter.native="add"/>
</template>

<script>
export default {
  name: 'add-todo',
  data() { return { newtodo: ''} },
  methods: {
    add() {
      this.$emit("new", this.newtodo);
    }
  }
}
</script>

// app.module.ts

@NgModule({
  declarations: [
    AppComponent, AddTodo, TodoList, Todo
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// App.vue
<script>
import AddTodo from "./components/AddTodo";
import TodoList from "./components/TodoList";
import Filters from "./components/Filters";
 
export default {
  name: "app",
  components: {
    AddTodo,
    TodoList,
    Filters
  },
};
</script>