Angular #2 Data Binding {{}} , [ ], ( ), [()]

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

<h1>Test App Works!</h1>

<div>

  <label>Enter your name:</label>

  <input type="text" [(ngModel)]="userName">

</div>

<h1>Hello, {{ userName }}!</h1>

+ add the following in app.component.css

h1 {

    color :rgb(168, 26, 104);

}

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.

<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  :