Thanks for sharing this great tooling. I really like the idea and trying to get it up and running for my project. I started by experimenting on the simple angular tutorial Heros app. Stuck on the step four two way binding. To use angular two way binding you need to import FormsModule from Angular. There is no mention in your tutorial of where to input this module. Dig into angular-playground source code, I found my-playground.module.ts and used it as the starting point, but still got the same not recognized error. There is no declared section in the my-playground.module.ts, and the AppComponent is already declared in PlaygroundCommon module, so this could be by design. Anyway, I am just trying to follow the official Angular Heros tutorial in step three and trying to get this playground working, but stuck here. If I commented out the two way binding in the hero template, it will work, but un-comment will generate errors. Here are the code snippets:
Heroes.Component.html:
heroes works!
name:
ID: {{hero.id}}
Name: {{hero.name | lowercase}}
Title: {{hero.title | uppercase}}
my-playground.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PlaygroundCommonModule } from 'angular-playground';
import { AppComponent } from 'angular-playground';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
PlaygroundCommonModule,
FormsModule
],
bootstrap: [AppComponent]
})
export class MyPlaygroundModule {}
main.playground.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { initializePlayground, PlaygroundModule } from 'angular-playground';
import { MyPlaygroundModule } from './my-playground.module';
initializePlayground('app-root');
platformBrowserDynamic().bootstrapModule(MyPlaygroundModule);
Any help to get pass this hurdle will be appreciated.
Thanks. Frank