如何在角度2中从模块到我的组件访问变量的值？

Question

So this is my app.module.ts (i've injected NgxTypeaheadModule like this)

   import { NgxTypeaheadModule } from '../components/common/components/ngx-typeahead/ngx-typeahead'    
   imports: [NgxTypeaheadModule]

This is the module ( ngxTypeahead.component.ts )

This is ngxTypeahead.component.ts file inside the above module

export class NgxTypeAheadComponent implements OnInit, OnDestroy {
      showSuggestions = false;

      somefunc(){
       showSuggestions = true;
   }

}

In the above module component file, showSuggestions variable will change according to user click.

---

I'm using the above module in my component file below( chat.component.ts )

 export class ChatComponent implements OnInit, OnDestroy {
       @ViewChild("input") input: ElementRef;

       onKey(event) {
            if (userInput.length == 0)) {

                this.input.showSuggestions = false;
            }
        }
    }

This is my chatComponent.html file

 <input #input [(ngModel)]="inputText" ngxTypeahead (keyup)="onKey($event)">

But if i use this.input.showSuggestions , i'm getting the value ,but i'm getting this error

So Which is the correct way to pass the showSuggestions value from module to my chat.component.ts ??

Any suggestions or solution would be appreciated!!

Answer 1

You could @ViewChild("input") input: NgxTypeAheadComponent; and get the component instance instead of the element ref, but that's bad practice and a path to violating unidirectional data flow! Can also break change detection, doesn't work with OnPush.

Use @Input instead: @Input() showSuggestions = false; and in ChatComponent:

<input #input [(ngModel)]="inputText" ngxTypeahead 
(keyup)="onKey($event)" [showSuggestions]="showSuggestions">