Getting error while passing event.target.value in angular ts - html

Question

My app.component.html code is :
<h1>Password Generator</h1>
<div>
<label>Length</label>
</div>
<input (input)="onChangeLength($event.target.value)"/>
<div>
<div>
<input (change)="onChangeHandlerLetter()" type="checkbox" />
<label>Use Letter</label>
</div>
<div>
<input (change)="onChangeHandlerNumbers()" type="checkbox" />
<label>Use Numbers</label>
</div>
<div>
<input (change)="onChangeHandlerSymbols()" type="checkbox" />
<label>Use Symbols</label>
</div>
<div>
<button (click)="onButtonClick()">Generate</button>
</div>
</div>
<div>
<label>Your Password</label>
</div>
<input [value]="password"/>
{{password}}
My app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
length=0;
includeLetters=false;
includeSymbols=false;
includeNumbers=false
onChangeHandlerLetter=()=>{
this.includeLetters=!this.includeLetters
}
onChangeHandlerSymbols=()=>{
this.includeSymbols=!this.includeSymbols
}
onChangeHandlerNumbers=()=>{
this.includeNumbers=!this.includeNumbers
}
onChangeLength=(val:string)=>{
const parsedValue=parseInt(val);
if(!isNaN(parsedValue)){
this.length=parsedValue
}
console.log(length);
}
password=" "
onButtonClick=()=>{
this.password="My Password"
console.log("button clicked");
console.log(`Following should be included :
Sybmols : ${this.includeSymbols}
Numbers : ${this.includeNumbers}
Letters : ${this.includeLetters}`)
}
}
error :
index.js:561 [webpack-dev-server] ERROR
src/app/app.component.html:5:46 - error TS2531: Object is possibly 'null'.
5 <input (input)="onChangeLength($event.target.value)"/>
~~~~~
src/app/app.component.ts:5:16
5 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
Hello greetings community , I am new to TS and angular so I dont know why I am getting this error I need to take input from input bar and change into number and console.log I am following a tutorial and he is getting correct output I dont know why

Answer 1

You need to tell TypeScript the type of the HTMLElement which is your target.
To do so instead of $event.target.value please use $event as below:
<input (input)="onChangeLength($event)"/>
then in app.component.ts use:
const parsedValue=parseInt((<HTMLInputElement>event.target).value);
Working codes:
app.component.ts
import { Component } from '#angular/core';
import { ColdObservable } from 'rxjs/internal/testing/ColdObservable';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
length=0;
includeLetters=false;
includeSymbols=false;
includeNumbers=false
onChangeHandlerLetter=()=>{
this.includeLetters=!this.includeLetters
}
onChangeHandlerSymbols=()=>{
this.includeSymbols=!this.includeSymbols
}
onChangeHandlerNumbers=()=>{
this.includeNumbers=!this.includeNumbers
}
onChangeLength=( event: Event)=>{
const parsedValue=parseInt((<HTMLInputElement>event.target).value);
if(!isNaN(parsedValue)){
this.length=parsedValue
}
console.log(length);
}
password=" "
onButtonClick=()=>{
this.password="My Password"
console.log("button clicked");
console.log(`Following should be included :
Sybmols : ${this.includeSymbols}
Numbers : ${this.includeNumbers}
Letters : ${this.includeLetters}`)
}
}
app.component.html
<h1>Password Generator</h1>
<div>
<label>Length</label>
</div>
<input (input)="onChangeLength($event)"/>
<div>
<div>
<input (change)="onChangeHandlerLetter()" type="checkbox" />
<label>Use Letter</label>
</div>
<div>
<input (change)="onChangeHandlerNumbers()" type="checkbox" />
<label>Use Numbers</label>
</div>
<div>
<input (change)="onChangeHandlerSymbols()" type="checkbox" />
<label>Use Symbols</label>
</div>
<div>
<button (click)="onButtonClick()">Generate</button>
</div>
</div>
<div>
<label>Your Password</label>
</div>
<input [value]="password"/>
{{password}}