I need assistance with creating an inline input edit component.
The component is loading correctly, but it seems like the @Input() variables are always returning undefined.
index.html
...
<app-inlineinput
[name]="username"
[fieldValue]="myname"
[isRequired]="true"
(updateValue)="saveField('username', $event)"></app-inlineinput>
...
inlineinput.component.ts
import { Component, OnInit } from '@angular/core';
import { Input, EventEmitter, Output, ViewChild, Renderer } from '@angular/core';
@Component({
selector: 'app-inlineinput',
templateUrl: './inlineinput.component.html',
styleUrls: ['./inlineinput.component.scss'],
})
export class InlineinputComponent implements OnInit {
@Input() name:string;
@Input() fieldValue:string;
@Input() isRequired:string;
@Input() minLength:string;
@Input() maxLength:string;
@Output() updateValue: EventEmitter<any> = new EventEmitter();
@ViewChild('container') container;
public value:any;
public isEditView:boolean = false;
public docEditUnlisten:any;
constructor(
private renderer:Renderer
) { }
ngOnInit(){
console.log(this.fieldValue); <============ THIS SHOWS UNDEFINED
}
showEditable()
{
this.value = this.fieldValue;
this.isEditView = true;
this.docEditUnlisten = this.renderer.listenGlobal('document', 'click', (event) => {
if(!this.container.nativeElement.contains(event.target)){
this.showDetail();
}
});
}
save(){
this.updateValue.emit(this.value);
}
showDetail(){
this.isEditView = false;
}
}
inlineinput.component.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { InlineinputComponent } from './inlineinput.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
],
declarations: [
InlineinputComponent
],
exports: [
InlineinputComponent
],
entryComponents: [
],
})
export class InlineinputComponentModule {
}
inlineinput.component.html
...
<span class="editable-click">
=> {{fieldValue}}
<div #container class="editable-container editable-inline">
...
I'm attempting to display => {{fieldValue}}, but it's empty and even in the component's ngOnInit, it shows as undefined.
Do you have any insights on what might be going wrong?