Let’s Build Our First Angular Project! 🚀
Ex 1: One Way Binding {{}}
Step 1: Create a New Angular Project
ng new ex1
- Say ‘N’ when asked about Angular Routing.
- Choose CSS for stylesheets.
- Wait for npm packages to install.
Step 2: Open Your Project in VS Code
cd ex1
code .
Expand the src directory to see app, assets, and environments folders.
Step 3: Modify app.component.html
Delete everything and add:
<h1>{{title}}</h1>
Save the file and run:
ng serve
Open http://localhost:4200 in a browser, and boom! You’ll see your title!
Ex 2: User-Defined Object Binding
Step 1: Modify app.component.ts
Add this inside the AppComponent class:
inputData = 'User Defined Data in Class';
Step 2: Modify app.component.html
<p style="color: rgb(128, 0, 28);"><b>{{inputData}}</b></p>
Save and check the browser!
Ex 3: Creating a New Component
Step 1: Generate a Component
ng generate component container
This creates four new files and updates app.module.ts.
Step 2: Modify app.component.html
Add this:
<app-container></app-container>
Step 3 a): Modify container.component.html
<h1>Header Comes Here</h1>
<h3>Nav Bar Comes Here</h3>
<h5>Content Comes Here</h5>
b) Modify app.component.ts as shown below and save@Component({ selector: 'app-root', imports: [ContainerComponent],
Run:
ng serve
Check the browser to see the changes as shown above!
Ex 4: Event Data Binding
Step 1: Modify container.component.html
<div>
<label>First Name:</label>
<input type="text">
<button (click)="onClick()">Click Me</button>
</div>
Step 2: Modify container.component.ts
Inside ContainerComponent class, add:
onClick() {
alert('Somebody clicked the button!');
}
Save and run ng serve, then check http://localhost:4200. Click the button and watch the magic happen!
Ex 5: Two-Way Binding with ngModel
Step 1: Modify app.component.ts (delete the old contents)
import { Component } from '@angular/core';import { FormsModule } from '@angular/forms'; // Import FormsModule
@Component({ selector: 'app-root', standalone: true, imports: [FormsModule], // Add FormsModule here templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { userName: string = 'iMMSS Inc'; // Variable for Two-Way Binding}Step 2. Modify (delete the old contents) app.component.html file
+ add the following in app.component.css
Run ng serve and check **http://localhost:4200**—whatever you type will update in real-time!
🎯 What’s Next?
- Try experimenting with Directives and Pipes!
- Build dynamic forms and API integrations.
- Show off your Angular skills to the world! 🚀
Happy Coding! 🎉
Hand on Outputs:
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 :
