How to access the value of a variable from a module to my component in angular 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!!

funkizer · Accepted Answer · 2018-02-18 09:04:26Z

4

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">

answered Feb 18, 2018 at 9:04

funkizer

4,9271 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access the value of a variable from a module to my component in angular 2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related