Angular - Components - Code Organization - One-way and Two-way Binding

[akash-coded]

Organize the codebase of this app by putting appropriate code into the suitable nested or sibling components.

[rrajbanshi]

one-way-binding.component.html

<div>
    <p>My name is {{firstName}} {{lastName}}</p>

    <button (click) = "clickEventFunc()">click for alert message</button>
</div>

one-way-binding.component.ts

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

@Component({
  selector: 'app-one-way-binding',
  templateUrl: './one-way-binding.component.html',
  styleUrls: ['./one-way-binding.component.css']
})
export class OneWayBindingComponent implements OnInit {

  constructor() { }
  firstName: String = "rakesh";
  lastName : String = "rajbanshi"

  clickEventFunc():void{
    alert("hello MOTO");
  }
  ngOnInit(): void {
  }

}

two-way-binding.component.html

<div>
<label>Enter the value:</label>
<input type="text"  [(ngModel)] = "val"/>
<br>
<h2>You entered : {{val | uppercase}}</h2>
</div>

two-way-binding.component.ts

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

@Component({
  selector: 'app-two-way-binding',
  templateUrl: './two-way-binding.component.html',
  styleUrls: ['./two-way-binding.component.css']
})
export class TwoWayBindingComponent implements OnInit {

  constructor() { }
 val : string = ""
  ngOnInit(): void {
  }

}

app.component.html

<app-one-way-binding></app-one-way-binding>
<app-two-way-binding></app-two-way-binding>

[lingamurthi]

//APP.COMPONENT.HTML
<button (click)="handlechange()">search</button>

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

//APP.COMPONENT.TS

export class AppComponent {

text:string=""
  handlechange()
  {
     console.log("Hiiiii");
     
  }
}

[PurnaPichuka]

one-way-binding-interpolation.html

<h4>interpolation-example component works!</h4>
<h3>Hello {{ name }}!!</h3>

one-way-binding-interpolation.ts

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

@Component({
  selector: 'app-interpolation-example',
  templateUrl: './interpolation-example.component.html',
  styleUrls: ['./interpolation-example.component.css']
})
export class InterpolationExampleComponent implements OnInit {

  public name = "Futurense"
  public value = true

  constructor() { }

  ngOnInit(): void {
  }

}

one-way-binding-event.html

<h4>event-ex component works!</h4>

<input type="button" (click)="btnClick()" value="ClickMe" />
<h3>{{ greet }}</h3>

one-way-binding-event.ts

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

@Component({
  selector: 'app-event-ex',
  templateUrl: './event-ex.component.html',
  styleUrls: ['./event-ex.component.css']
})
export class EventExComponent implements OnInit {

  public greet = "";
  btnClick(){
    this.greet = "Hello All, Welcome to Angular-10"
  }

  constructor() { }

  ngOnInit(): void {
  }

}

two-way-binding.html

<h4>two-way-binding-ex works!</h4>

<input type="text" [(ngModel)]="data" />
<input type="button" value="ClickMe" />
<br />
<h4>{{ data }}</h4>

two-way-binding.ts

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

@Component({
  selector: 'app-two-way-binding-ex',
  templateUrl: './two-way-binding-ex.component.html',
  styleUrls: ['./two-way-binding-ex.component.css']
})
export class TwoWayBindingExComponent implements OnInit {

  public data=""

  constructor() { }

  ngOnInit(): void {
  }

}