Pass value to a function in a different Component

Issue

I have 2 components. one is a page and the other is a transition that slides over the page.. I wish to pass a value to a function in the transitionComponent but cant figure it out.. is @input the best way to do this or is there another way to directly call a function in another component ?

Edited with code example – I have slimmed down the main component to just focus on passing this value:

parent component:

            import {Component, ElementRef, OnInit} from '@angular/core';
            import {TransitionComponent} from '../../PageLoader/TransitionComponent';


            @Component({
                selector: 'home',
                templateUrl: './app/components/Homepage/list/index.html',
                directives: [ TransitionComponent]
            })


            export class HomepageListComponent implements OnInit {

                transitionState: string;

                    constructor() {
                        this.transitionState = this.transitionState;
                    }


                    ngOnInit() {

                        this.transitionState = "test";

                    }
            }

Child Component:

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

            @Component({
            selector: 'the-loader',
            template: `<div class="loader"></div>`,
            styles: [`
            .loader {
            background-color: black;
            height: 100%;
            width:100%;
            position:absolute;
            top:0;
            left:0;
            z-index:99999;
            }
            `]
            })




            export class TransitionComponent {

                @Input() transitionState;

                transitionStatus(transitionState) {
                    alert(transitionState);
                }


            }

Solution

  • If both components have parent-child scenario,you can exchange data from Parent=>Child and Child => Parent using @Input, @ViewChild, EventEmitter, Injector and so on…
  • If both components don’t have any relation with each other, you can think of having service (sharedService)
  • Update:

    I think what you want is to call a child function from parent and pass the data at a same time. For that you can use @ViewChild API shown here.
    NOTE: you don’t need to use @Input.

    https://plnkr.co/edit/VaddcH?p=preview

    with RC – https://plnkr.co/edit/iRLGfgO4zwUXDXzw9ot7?p=preview

    import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; // <---ViewChild added               
    import {TransitionComponent} from '../../PageLoader/TransitionComponent';    
    
                @Component({
                    selector: 'home',
                    templateUrl: './app/components/Homepage/list/index.html',
                    directives: [ TransitionComponent]
                })
    
    
                export class HomepageListComponent{    
                   @ViewChild(TransitionComponent) vc:TransitionComponent;
                   ngAfterViewInit()
                   {
                       this.vc.transitionStatus('Angular2');
                   } 
                }
    

            export class TransitionComponent {
                transitionStatus(transitionState:string) {
                    alert(transitionState);
                }
            }
    

    Answered By – Nikhil Shah

    Answer Checked By – Mildred Charles (AngularFixing Admin)

    Leave a Reply

    Your email address will not be published.