Angular2 call one function component from another component

Question

I have been searching for a while,on google, stackoverflow, but nothing, Angular2 seems to be DIY, not finish.. So i have login.component.ts, that contains the materialize modal template :

import { Directive, Component, Input, Output, OnInit, OnDestroy,  EventEmitter } from '@angular/core';
import { MaterializeModule,MaterializeAction } from 'angular2-materialize';

declare var $: any

@Component({
selector: "dialogs",
template: '
  <!-- Modal Structure -->
  <div id="modal1" class="modal bottom-sheet" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
    <div class="modal-content">Modal Content</div>
    <div class="modal-footer">
      <a class="waves-effect waves-green btn-flat" (click)="closeModal()">Close</a>
    </div>
  </div>
'
})
export class Dialogs implements OnInit {
  @Output() modalActions = new EventEmitter<string|MaterializeAction>();

  constructor() {
  }
  ngOnInit() {
  }
  openModal() {
   this.modalActions.emit({action:"modal",params:['open']});
  }
   closeModal() {
   this.modalActions.emit({action:"modal",params:['close']});
  }

}

And my header.component.ts

import {Component, OnInit, OnDestroy} from "@angular/core"
import { LoginComponent  } from '../login/login.component';
import { Dialogs } from '../login/login.component';

@Component({
  selector: 'headerCustom',
  styleUrls: ['./header.component.css'],
  template:
          `
    <nav class="navbar-material light-blue lighten-1"  role="navigation">
    <div class="nav-wrapper">
    <a href="#!" class="brand-logo">
    <img src="./images/logo.png" />
    </a>
    <a materialize="sideNav" href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
    <li><a href="#">Subscribe</a></li>
    <li>
    <a class="waves-effect waves-light btn modal-trigger" (modalActions)="openModal()">Open Modal Login</a>
    </li>
  </ul>
  <ul class="side-nav" id="mobile-demo">
    <li><a href="#">Subscribe</a></li>
    <li>
    <a class="waves-effect waves-light btn modal-trigger" (modalActions)="openModal()">Open Modal Login</a>
    </li>
  </ul>
    </div>
    </nav>`
    })
    export class HeaderComponent implements OnInit, OnDestroy  {

    }

I want just simple actions, when i click on the buttons header, that'll open the modal? Why i can't call the function of login component?

I have try many code like :

<a class="waves-effect waves-light btn modal-trigger" (click)="modalActions.openModal()">Open Modal Login</a>

But nothing.

Thanks you for your help

AngularChef · Accepted Answer · 2016-11-16 10:52:35Z

3

A (relatively) easy way that a component can get a hold of another component's methods and properties is to use a local variable.

However, it does require that the component calling the methods is a direct parent of the component containing the methods.

In your case, if the Dialogs component is a child of the HeaderComponent component, your code would look like this:

@Component({
  selector: 'headerCustom',
  template: `
    <!-- markup -->
    <button (click)="modal.openModal()">Open</button>
    <!-- markup -->
    <dialogs #modal></dialogs>
    <!-- markup -->
  `
})
export class HeaderComponent { }

Note the local variable #modal on the child component, which the parent can use to access its methods (modal.openModal()).

You didn't say how you structured your component tree, so it might not work in your case.

See official doc.

answered Nov 16, 2016 at 10:52

AngularChef

14.1k9 gold badges55 silver badges69 bronze badges

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

1 Comment

csu Over a year ago

Your'r GREAT :), it's so simple in fact, that's work well !!!! Thanks you very much !!

DINESHKUMAR S · Accepted Answer · 2017-11-24 06:07:09Z

Call One Component Function From Another Component - Angular 2

Component A TS File

import { Component, OnInit } from '@angular/core';
import { RequestService , RoleService } from '../../services/index';
import { Router, ActivatedRoute } from '@angular/router';
import { FormsModule, ReactiveFormsModule }   from '@angular/forms';

@Component({
  selector: 'app-user-details',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.css']
})
export class UserDetailsComponent implements OnInit {
  loading = false;
  constructor(private router: Router,
    private roleService : RoleService) { }

    ngOnInit() {
    }
  userDetails = [];
  viewDetailsUsers(id){
    this.loading = true;
    this.roleService.viewUser(id)
    .subscribe(
        data => { 
            this.userDetails = data.result[0];
            this.loading = false;
        },
        error => {     
          console.log('error');
        });
  }
}

Component B HTML File

<div class="partImage">         
     <button type="button" class=" details" (click)=modalPop.viewDetailsUsers(item.id) data-backdrop="static" data-toggle="modal" data-target="#userModel">Details</button>
</div>
<app-user-details #modalPop></app-user-details>

Compenent A HTML File

<div id="userModel" class="modal fade" role="dialog">
  <div class="modal-dialog" [hidden]="loading">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">User Detail</h4>
      </div>
      <div class="modal-body">       
        <div [hidden]=isHide class="col-lg-12">
          <div class="col-lg-4">
            <img src="{{APIURL}}{{userDetails.photo_path}}{{userDetails.photo}}" class="img-responsive">
          </div>
          <div class="col-lg-8">

          </div>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>

  </div>
</div>

Collectives™ on Stack Overflow

Angular2 call one function component from another component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related