Attribute, Property and Event Binding

7. A. AIM: Binding image with class property using property binding.

Step-1: Edit the app.component.css with the following code.

app.component.css

.imgclass{
  border-radius: 50%;
  width: 100px;
}

Step-2: Edit the app.component.ts with the following code.

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstName = "Govardhan"
  lastName = "Bhavani"
  imgSrc = "assets/BhavaniGovardhan.jpeg"
  imgClass = "imgclass"
}

Step-3: Edit the app.component.html with the following code.

app.component.html

<p>First Name:: <label [innerText]="firstName"></label></p>
<p>Last Name:: <label [innerText]="lastName"></label></p>
<img [src]="imgSrc" [class]="imgClass" />

Step-4

Run the following command to build and serve your app.

.../first-app> ng serve

Open browser and enter the URL http://localhost:4200 to find the application.

Output:

---

7. B. AIM: Binding an element using user actions like entering text in input fields.

Step-1: Edit the app.component.ts with the following code.

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userName = ""
  DisplayName(data:any){
    this.userName = data.target.value
  }
}

Step-2: Edit the app.component.html with the following code.

app.component.html

<input type="text" name="username" placeholder="Enter User Name" (keyup)="DisplayName($event)" />
<h3>Welcome {{ userName }}</h3>

Step-3

Run the following command to build and serve your app.

.../first-app> ng serve

Open browser and enter the URL http://localhost:4200 to find the application.

Output: