CODEWITHSUNDEEP
javascriptangularviewchild
AlexFF1
AlexFF1

Reputation: 1283

angular 2 variable returns null in child component method when called from parent component

I have parent and child component communication, I want to fire up a method in child component that should open up a modal and pass the data. When I call a function from parent using ViewChild, the variable in the child method component returns null, however should have data inside variable. When I fire same function within the child component, the data is available, but its not a case when called from parent component. What is missing and why I don't see data in child component, from fire up from the parent component?

parent.html

    <button (click)="openModal()">New</button>

    <child><child>

parent.ts

    import { FilterComponent } from './../filter/filter.component';

    @ViewChild(FilterComponent) filterComponent: FilterComponent;


    openModal(){
       this.filterComponent.openModal(); // when fired from here, the function in the child component fires, but the variable inside it returns null
    }

child.html

       <button (click)="openModal()">New</button>
       <modal><modal>

child.ts

     openModal(){
       modalVisible = true;
        console.log(this.filter) returns null; when fired from parent component 
        console.log(this.filter) returns "filter data"; when fired within the component
      }

Upvotes: 0

Views: 1091

Answers (3)

Florent Arlandis
Florent Arlandis

Reputation: 925

I think you should rethink your architecture here.

If the method is triggered from the parent component only, then put into the parent component

If the the method is triggered from both parent AND child component, then put into a service

Upvotes: 0

Michael Sorensen
Michael Sorensen

Reputation: 2124

From what I can tell you are currently selecting ALL FilterComponents inside your parentComponent. In order to use this you need to be more specific. You can change your ViewChild to select only one FilterComponent if that fits your use case.

Example:

parent.html

<button (click)="openModal()">New</button>

<!-- notice the #child attribute -->
<child #child><child>

Then in parent.component.ts

import { FilterComponent } from './../filter/filter.component';

@ViewChild("child") filterComponent: FilterComponent;


openModal(){
   this.filterComponent.openModal(); // now that you're only selecting one element this function call should have access to this values. 
}

You can also reference the relevant stack blitz i made here: https://stackblitz.com/edit/angular-lqmc8x

Good luck!

Upvotes: 2

Rick
Rick

Reputation: 1880

I think you need an EventEmitter.

parent.html <child (messageEvent)="openModal($event)"></child>

child.ts import { Component, Output, EventEmitter } from @angular/core; export class... @Output() messageEvent = new EventEmitter<string>(); openModal(val) { this.messageEvent.emit(val); }

child.html <button (click)="openModal(val)">Click</button>

or something like that.

Upvotes: 0

Related Questions