Ex 1.
One Way Binding {{}}
In Visual Studio, Terminal
create a project using
ng new ex1
Ans N for Would you like to Add Angular Routing ?
Choose CSS for Which Style sheet format you like to use?
Will install packages(npm).
Open folder ex1
Expand src directory to see app, assets, environments.. directories.
In app directory, open app.component.html files. Delete all the contents.
add the following and save.
<h1>{{title}}</h1>
Invoke by
ng serve to run the server in Terminal Window.
Open any browser and go to http://localhost:/4200
will display the title ex1 in browser
Ex 2.
Add user defined object inputData
Add the above USO in app.component.ts file AppCompenet class by
inputData = 'User Defined Data in Class';
In app directory, open app.component.html files.
add the following and save.
<p style="color: rgb(128, 0, 28);"><b>{{inputData}}</b></p>
Check in browser.
Ex 3.
Add a new Component 'Container'In terminal
In Terminal Window, command prompt
ng generate component container
to create a new componont. Will create four new files and one update one file.
PS F:\AngularCourse\ex1> ng generate component container
CREATE src/app/container/container.component.html (24 bytes)
CREATE src/app/container/container.component.spec.ts (620 bytes)
CREATE src/app/container/container.component.ts (287 bytes)
CREATE src/app/container/container.component.css (0 bytes)
UPDATE src/app/app.module.ts (408 bytes)
Now check the container.component.html file.
Add the following contents inside app.compoent.html
<app-container></app-container>
Delete the contents. Add the following
<h1>Header Comes here</h1>
<h3>Nav Bar comes here</h3>
<h5>Content comes here</h5>
Now invoke webpack by
ng serve
command inside the terminal prompt to check the browser contents.
Ex 4.
Evet data binding
add the following contents in container.component.html file.
<div>
<Label> First Name : </Label>
<input type="text">
<button (click) = "onClick()">Clik Me</button>
</div>
in src\app\container\container.component.ts file, add the following
Inside ContainerComponent class after ngOnInit(): void{} and save
onClick(){
alert('Some body kicked the Button');
}
Now invoke webpack by ng serve and check http://localhost:4200 in browser. Click the button to see alert box.
Ex4:
Two way Binding [(ngModule)]y
create a new project using
ng new ex4
Add the following contents in container.component.html file.
<div>
<Label> First Name : </Label>
<input type="text" [(ngModel)] = "inputData"> <br><br>
Entered Choice is : {{inputData}}
</div>
Open app.component.ts File , add inside the class AppComponent and save file.
inputData = 'Two way Binding Example';
Add the following in app.module.ts file import section and save.
import { FormsModule } from '@angular/forms';
Register FormsModule as shown below:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
run ng serve in terminal. Check in the opened browser http://localhost:4200.
Whatever you typed will be displayed immediately next to Entered Choice is :
