Add user inputs?-CodePudding

can you add the user inputs in Angular? I am trying to display the result num 5 in the p tag every time i change the input . Now it displays random values.

.html file

    <input #box class = "textbox" type="text" name="Name" (change)="keyup(value)>
    <p>{{value}}</p>

.ts file

@Injectable({
  providedIn: 'root'
})
@Component({
  selector: 'app-cp1',
  templateUrl: './cp1.component.html',
  styleUrls: ['./cp1.component.css']
})
export class cp1 implements OnInit {
  constructor() {}

  ngOnInit(): void {
  }

  keyup(num: number) {
    var asd = num   5;
    this.value = asd;
  }
}

CodePudding user response：

In .ts declare a variable

value:any

In .html

<input [(ngModel)]="value">
<p>{{( value) 5}}</p>

But really I think you should take a tour of heroes. I know it spend some time, but give you a general idea of Angular

CodePudding user response：

Shouldn't you assign this.value to asd instead of num ?

CodePudding user response：

You have to use ngModel and ngModelChange.

Template :

<input
  #box
  
  type="text"
  name="Name"
  [(ngModel)]="name"
  (ngModelChange)="addValue()"
/>
<p>{{ name }}</p>
<p>{{ value }}</p>

TypeScript :

  name: String;
  value = 0;

  addValue() {
    this.value = this.value   5;
  }

CodePudding user response：

You are passing this.value to keyup in your template.

You want:

(change)="keyup(box.value)

then in keyup:

this.value = num   5;