Trigger button click from another component button in angular 4

Question

I have component A button which displays form on click and component B button to show name. I want to trigger ComponentA button and display form when componentB button is clicked

componentA HTML

<section>
   <button (click)="toggle()">Click Here To Search</button>

 <div *ngIf="!showInput">
    <input type="text"/><br/>
  <button type="submit">Submit</button>
  <button>Cancel</button>
</div>
</section>

componentA TS

  showInput = true; 
//...
  toggle() {
            this.showInput = !this.showInput;
           }

componentB HTML

<button (click)="toggleText()">Add Fruit</button>

<div *ngIf="showText">Apple</div>

I have created an example.Please use this link

Example Link

Don't you want to show the name of the fruit or you just want to show the form if addFruit is clicked or want to show both simultaneously. As you are not clear what all exactly you want — Suryan
– Suryan, Commented Nov 1, 2018 at 23:01

Suryan · Accepted Answer · 2018-11-02 00:48:50Z

2

Well in that case make use of rxjs BehaviorSubject in a service, so that your entire application can make use of the variable and will update accordingly, like below

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class Service {
  toggle: BehaviorSubject<boolean> = new BehaviorSubject(false);
  toggle$ = this.toggle.asObservable();
}

and in your my text component

toggleText() {
  this.showText = !this.showText;
  this.service.toggle.next(this.showText)
}

and in your FormsComponent

showInput;

ngOnInit() {
  this.service.toggle$.subscribe(
    toggle => this.showInput = toggle
  )
}

Working demo

edited Nov 2, 2018 at 0:48

answered Nov 2, 2018 at 0:42

Suryan

6797 silver badges19 bronze badges

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

3 Comments

Jesse W Over a year ago

Worked like a charm @Suryan. I have a question for you that when using NgRx, Is it the good approach using service ?

Suryan Over a year ago

@JesseW sorry, don't have the experience of ngrx maybe other can help you out on this

Jesse W Over a year ago

Ok. Thank you so much @Suryan

Collectives™ on Stack Overflow

Trigger button click from another component button in angular 4

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related