User Input

Topics Covered

Taking input from user
Shadow DOM
View Encapsulation
ng-content

Taking input from user

1. Template Reference Variable

   • A template reference variable is often a reference to a DOM element within a template. It can also refer to a directive (which contains a component), an element, TemplateRef, or a web component.
   • Use the hash symbol # to declare a reference variable. The following reference variable, #player, declares a player variable on an <input> element.
   • You can refer to a template reference variable anywhere within the component's template. Here, a <button> further down the template refers to the player variable.

   <input #player placeholder="player name">
   <button (click)="playerDetails(player.value)">Call</button>

   playerDetails(playerName: HTMLInputElement) {
      this.playerName = playerName.value;
   }

2. Event Binding

<form (ngSubmit)="onSubmit($event)">
    <input name="player" value="Name">
</form>

onSubmit(event: any) {
    return event.target.player.value;
}

Without Form

1. Event Binding

<input (keyup)="onKey($event)">

onKey(event) {const inputValue = event.target.value;}

2. use ngModel i.e 2-way data binding

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

someString: string = '';

3. Must read article

---

Shadow DOM

View Encapsulation

ng-content