Question

Create a useful page for your project and use four types of data binding. To earn points, your examples must be different from the examples from this module.

1. interpolation binding

2. attribute binding

3. event binding

4. two-way binding

Answer 1

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

declarations: [AppComponent],

imports: [BrowserModule, AppRoutingModule, FormsModule],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {}

app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: [

'./app.component.css',

'../../node_modules/bootstrap/dist/css/bootstrap.min.css'

]

})

export class AppComponent {

//used for string interpolatin

formTitle = 'Login Form';

//used for one way data binding or property binding

username: string = 'admin';

//used for two way data binding

password: string;

// this method will print the values in the console of browser, clicked by event binding

submit() {

console.log('username: ' + this.username);

console.log('password: ' + this.password);

}

}

app.component.html

<div class="container bg-secondary">

<div class="row">

<div class="col-md-6 offset-md-3">

<p class="display-4">Angular Application</p>

<div class="card">

<div class="card-header">

<!-- String interpolation, printing variable formTitle in HTML page. -->

<!-- String interpolation is done as {{ variable }} -->

<h3 class="card-title">{{ formTitle }}</h3>

</div>

<div class="card-body">

<div class="form-group">

<label for="username">Username</label>

<!-- With the help pf property binding, we bind the property "value" of input tag

with the initialValue variable declared in ts file -->

<input

type="text"

id="username"

[value]="username"

class="form-control"

readonly

/>

</div>

<div class="form-group">

<label for="password">Password</label>

<!-- For two way data binding we use [(ngModel)] -->

<!-- Two way data binding is a collection of both property binding and event binding -->

<!-- So if we change it in html it will reflect in ts,and vice versa -->

<input

[(ngModel)]="password"

type="password"

id="password"

class="form-control"

/>

</div>

<!-- With the help of sring interplation printing the typed password -->

<p class="text-warning">Password entered: {{password}}</p>

<!-- With the help of event binding we call function declared in ts file -->

<div class="float-left">

<!-- Here we bind the click event to the submit() function declared in ts file -->

<button class="btn btn-danger" (click)="submit()">Submit</button>

</div>

</div>

</div>

</div>

</div>

</div>

Output:-

--------------------------------------

Please give me a UPVOTE. Thank you :)