Step 1: for new project creation

ng new template-demo

Step 2: For project running follow this command

ng serve

app.module.ts file

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

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

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

app.component.ts file

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // for interpolation
  pageTitle = 'Angular Component Interaction';
  // for property binding
  imgUrl = 'https://picsum.photos/200';
  count = 0;
  // for two way binding
  name: string;

  // Event binding
  incrementCount(){
    this.count +=1;
  }
}

app.component.html file

<h2>{{pageTitle}}</h2>
<div>
  <img [src]="imgUrl" alt="Image">
</div>

<div>
  <button (click)="incrementCount()">Click</button>
  <p>Clicked {{count}} times.</p>
</div>

<div>
  <input type="text"  [(ngModel)]="name"/>
  <p>Welcome {{name}}</p>
</div>

The post Angular Component Interaction – Binding first appeared on Bipon's Diary.