Trigger button click from another component button in angular 4 - html

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

Answer 1

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