CODEWITHSUNDEEP
angulartypescript
GCP
GCP

Reputation: 69

How to call one button click function to another component?

Here is my three components in dashboard.html 

<top-nav></top-nav>
<sidebar-cmp></sidebar-cmp>
<section class="main-container" [ngClass]="{sidebarPushRight: isActive}">   
  <router-outlet></router-outlet>
</section>

Here sidebar.html

<button type="button" class="btn btn-primary menu-icon" (click)="toggleMenu()"><i class="fa fa-bars"></i></button>
 <nav class="sidebar" [ngClass]="{sidebarPushRight: isActive, sidebarHide: isHide}">
 <ul class="list-group">
    <a routerLink="/dashboard/home" [routerLinkActive]="['router-link-active']" class="list-group-item">
        <i class="fa fa-fw fa-home"></i> Home
    </a>
  </ul>
<nav>

Here is sidebar.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Auth } from '../../login/auth.service';
import { Menu } from '../../webapi/model/models';
import { User } from '../../webapi/model/models';
import * as _ from 'lodash';

@Component({
moduleId: module.id,
selector: 'sidebar-cmp',
templateUrl: 'sidebar.html',
styleUrls: ['sidebar.css']
})

export class SidebarComponent implements OnInit {
 isHide = false;
 public toggleMenu(){
    this.isHide = !this.isHide;
  }
}

I have a button in sidebar.html, If i clicked on menu-icon button from sidebar.html i want to add one ngClass to main-container class in dashboard.html. Please anyone help on this. Thanks in advance.

Upvotes: 1

Views: 2859

Answers (2)

Siva
Siva

Reputation: 2785

Use EventEmitter and two-way data bind the isActive attribute

<sidebar-cmp [(isHide)]="isActive"></sidebar-cmp>


export class SidebarComponent implements OnInit {
 @Input() isHide: boolean = false;
 @Output() isHideChange: EventEmitter = new EventEmitter();
 public toggleMenu(){
    this.isHide = !this.isHide;
    this.isHideChange.emit(this.isHide);
  }
 }

Upvotes: 2

El houcine bougarfaoui
El houcine bougarfaoui

Reputation: 37343

use @Output decorator :

export class SidebarComponent implements OnInit {
 isHide = false;
  @Output() onActivate = new EventEmitter(); 
 public toggleMenu(){
    this.isHide = !this.isHide;
    onActivate.emit(!this.isHide);
  }
 }


export class DashBoardComponent implements OnInit {
 isActive= false;
  @Output() onActivate = new EventEmitter(); 
 public onActivate(isActive){
    this.isActive= isActive;
  }
 }

html:

 <sidebar-cmp (onActivate)="onActivate($event)"></sidebar-cmp>

Upvotes: 0

Related Questions