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

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  :