Scribd
Upload
6 views5 pages

Datacollection

Uploaded by

Rani Marri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views5 pages

Datacollection

Uploaded by

Rani Marri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

C:\users\hp\ng new hero-from –no-standalone

C:\users\hp\cd hero-form
C:\users\hp\hero-form\
Hero-form.component.css
h1{
text-align: center;
font-display:inherit;
background-color: chartreuse;
}
Hero-form.component.html
<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>

Hero-form.component.ts
import { Component } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-form',
templateUrl: './hero-form.component.html',
styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent {
}

App.component.html
<app-hero-form></app-hero-form>

App.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration }
from '@angular/platform-browser';
import { HeroFormComponent } from
'./hero-form/hero-form.component';
import { AppRoutingModule } from './app-
routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HeroFormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [
provideClientHydration()
],
bootstrap: [AppComponent]
})
export class AppModule { }

You might also like