docs(aio): update template forms to CLI (#20014)

PR Close #20014

aio/content/examples/forms/src/app/app.component.html

@@ -0,0 +1 @@
+<app-hero-form></app-hero-form>

aio/content/examples/forms/src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  template: '<app-hero-form></app-hero-form>'
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent { }

aio/content/examples/forms/src/app/app.module.ts

@@ -4,7 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
 
 import { AppComponent }  from './app.component';
-import { HeroFormComponent } from './hero-form.component';
+import { HeroFormComponent } from './hero-form/hero-form.component';
 
 @NgModule({
   imports: [
@@ -15,6 +15,7 @@ import { HeroFormComponent } from './hero-form.component';
     AppComponent,
     HeroFormComponent
   ],
+  providers: [],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }

aio/content/examples/forms/src/app/hero-form/hero-form.component.ts

@@ -2,11 +2,12 @@
 // #docregion , v1, final
 import { Component } from '@angular/core';
 
-import { Hero }    from './hero';
+import { Hero }    from '../hero';
 
 @Component({
   selector: 'app-hero-form',
-  templateUrl: './hero-form.component.html'
+  templateUrl: './hero-form.component.html',
+  styleUrls: ['./hero-form.component.css']
 })
 export class HeroFormComponent {