CODEWITHSUNDEEP
angularangular2-servicesangular2-components
csu
csu

Reputation: 395

Angular2 call one function component from another component

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

Upvotes: 1

Views: 9357

Answers (2)

DINESHKUMAR S
DINESHKUMAR S

Reputation: 51

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>

Upvotes: 2

AngularChef
AngularChef

Reputation: 14087

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.

Upvotes: 3

Related Questions