submit, keyup.enter not working on angular 10

user_10209710 0
Viewed 4474

I am learning angular from basic in my code I want to send text from text box on enter to function when I tried with just keyup keydown it was working fine but when try to use submit keyup.enter the whole component disappear

diagnos.component.html:

<input type="text" #nameText (keyup.enter)="addItem(nameText.value)">
<ul>
  <li *ngFor="let name of names">{{name}}</li>
</ul>

diagnos.component.ts:

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

@Component({
  selector: 'app-diagnos',
  templateUrl: './diagnos.component.html',
  styleUrls: ['./diagnos.component.css']
})
export class DiagnosComponent implements OnInit {
  names = ['abc','xyz'];
  constructor() { }
  ngOnInit(): void {
    
  }
  addItem(val){
    this.names.push(val);
  }

}

idle page: enter image description here

when used keyup only: enter image description here

when used keyup.enter or submit after pressing enter or submitting: enter image description here

after enter or submit whole component disappeared even that ul also and had tried logging on console if that function get call or not but that function doesn't call

my project link : https://github.com/ladbhupesh/angularapp

angular
3 Answers

I have tried to repro your code and all seems well especially keyup.enter

Attached herewith is the Stackblitz Demo for your reference.

May I know if what's missing?

Update

Based on the provided Github link you mentioned, when looking at the running code, seems like the @Output EventEmitter affects your (keyup.enter) which I'm quite not sure what went through your project as I have only scanned fragments of your code but you can resolve that issue by supplying this code below:

AppComponent

...
changePage(val) {
  if (typeof val === 'string') this.pageName = val;
}

What happened was, the event from DiagnosisComponent's keyup.enter was consoled or communicated on your AppComponent's changePage which it receives an object not string, resulting for the pageName to reinitialized it's value to the given object, thus, no components are being rendered and left your page empty as there are no pageName available for the given object.

You can check it out by performing console.log(val) inside your AppComponent's changePage(val) {...} function

user_68914060

This is how you trigger function with the enter key ,

 <input type="text" (keyup.enter)="function()">

not

(keyup.enter.p)
user_88939470

(keyup.enter) worked for me when added it in container div not in input

user_76494480
Related