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.
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.
Check in browser.
Ex 3.
Add a new Component 'Container'In terminal
In Terminal Window, command prompt
to create a new componont. Will create four new files and one update one file.
Now check the container.component.html file.
Add the following contents inside app.compoent.html
Delete the contents. Add the following
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.
in src\app\container\container.component.ts file, add the following
Inside ContainerComponent class after ngOnInit(): void{} and save
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.
Open app.component.ts File , add inside the class AppComponent and save file.
Add the following in app.module.ts file import section and save.
Register FormsModule as shown below:
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 :
