C:\users\hp\ng new hero-from –no-standalone
C:\users\hp\cd hero-form
C:\users\hp\hero-form\
[Link]
h1{
text-align: center;
font-display:inherit;
background-color: chartreuse;
}
[Link]
<div class="container">
<h1>Hero Form</h1>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control"
id="name" required>
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control"
id="alterEgo">
</div>
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power"
required>
<option *ngFor="let pow of powers"
[value]="pow">{{pow}}</option>
</select>
</div>
<button type="submit" class="btn btn-success"
>Submit</button>
</form>
</div>
[Link]
import { Component } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-form',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class HeroFormComponent {
}
[Link]
<app-hero-form></app-hero-form>
[Link]
import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration }
from '@angular/platform-browser';
import { HeroFormComponent } from
'./hero-form/[Link]';
import { AppRoutingModule } from './app-
[Link]';
import { AppComponent } from './[Link]';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HeroFormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [
provideClientHydration()
],
bootstrap: [AppComponent]
})
export class AppModule { }
