4. 1 Angular Property Binding,

 AIM: Binding image with class property using property binding.


download image.jpg to src\assets folder

Update component.ts with


imageUrl: string = '/assets/image.jpg';

in export Class


add the following line to component.html file

<img [src]="imageUrl" alt="Image">


4.3  Style and Event Binding

Binding an element using inline style and user actions like entering text in input fields. ANGULAR


  1. Style Binding:

Assume you have an input field and a paragraph element. You want to change the paragraph's color based on the text entered in the input field.


app.component.html:

<input type="text" (input)="onInput($event)"> <p [style.color]="textColor">This text changes color</p>

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  textColor = 'black'; // Initial text color

  onInput(event: any) {
    // Assuming you want to set the text color based on the input value
    if (event.target.value === 'red') {
      this.textColor = 'red';
    } else if (event.target.value === 'blue') {
      this.textColor = 'blue';
    } else {
      this.textColor = 'black';
    }
  }
}



In this example, the (input) event is used to detect changes in the input field's value. The onInput method is then called, where you can define the logic to change the textColor property. The [style.color] binding is used to dynamically apply the specified color to the paragraph element.

  1. 2. Event Binding:

Now let's handle a button click event to perform an action when the button is clicked.

app.component.html:

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

<button (click)="displayText()">Show Text</button>

<p>{{ displayedText }}</p>

(To make this work, include forms modules in module.ts file)

app.component.ts:

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { inputText: string = ''; // Input text from user displayedText: string = ''; // Displayed text displayText() { this.displayedText = this.inputText; } }

In this example, the [(ngModel)] directive is used to bind the value of the input field to the inputText property in the component. The (click) event on the button is used to trigger the displayText method when the button is clicked. This method sets the value of displayedText, which is then displayed in the <p> element.

Remember to include the necessary module imports for FormsModule

like:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Import FormsModule

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Comments

Post a Comment

Popular posts from this blog

9. Angular and MongoDBs

Angular and MongoDBs 1.       Angular Application Setup Observe   the   link   http://localhost:4200/welcome   on   which   the   mCart   application   is   running.     2.       Components   and   Modules Create   a   new   component   called   hello   and   render   Hello   Angular   on   the   Page   3.       Elements   of   Template Add   an   event   to   the   hello   component   template   and   when   it   is   clicked,   it   should   change the   courseName.   4.       ngFor Create a courses array and rendering it in the template using ngFor directive in a list format   5.       ngClass Ap...
Read more

1. a. Angular Application Setup

Observe the link http://localhost:4200/welcome on which the mCart application is running. Perform the below activities to understand the features of the application. Angular Application Setup: Install Node.js: Visit the Node.js website ( https://nodejs.org ) and download the latest version of Node.js. Follow the installation instructions specific to your operating system. PRebuilt software (2nd Pane) Install Angular CLI: Open a terminal or command prompt and run the following command to install the Angular CLI globally: npm install -g @angular/cli@13.0 Create a new Angular project: In the terminal or command prompt, navigate to the desired directory where you want to create your Angular project. Run the following command to create a new project named "mCart": ng new mCart Change into the project directory: Move into the newly created project directory by running the following command: cd mCart Serve the application: Start a local development server and s...
Read more

2. Structural Directives - ngIf

 2.a  Structural Directives - ngIf Create a login form with username and password fields. If the user enters the correct credentials, it should render a "Welcome <<username>>" message otherwise it should render "Invalid Login!!! Please try again..." message Step 1: Generate a new component ng generate component login step 2: Update the login component template Open the login.component.html file and replace its content with the following code: <div *ngIf="isLoggedIn; else loginForm"> <h2>Welcome {{ username }}!</h2> </div> <ng-template #loginForm> <form (ngSubmit)="submitForm()"> <div> <label for="username">Username:</label> <input type="text" id="username" name="username" [(ngModel)]="username" required> </div> <div> <label for="password">Password:</label>...
Read more