How to bind components in Angular 8?

Question

I hope that's simple question, but I stuck a little bit. I have the next structure:

Component A

<ng-template [ngIf]="flaggedRecords">
...
<button (click)="showComparisonWindow(pi);">MERGE RECORDS</button>
...
</ng-template>
<ng-container *ngIf="showMergeCompare">
  <app-component-B></app-component-B>
</ng-container>

Component B

<div>
...
<li><button type="button" (click)="closeMerge()"></button><li>
...
</biv>

I have Component A with a list of entries and buttons that should hide the view of Component A and display the content of Component B. Component B has an X-button that should close Component B and show Component A again.

I described in the component-A.ts

public showComparisonWindow(pi: number) {
    this.showMergeCompare = !this.showMergeCompare;
    this.flaggedRecords = !this.flaggedRecords;
}

That works for me!

BUT if I do the same for closeMerge() in the component-B.ts:

public closeMerge() {
    this.showMergeCompare = !this.showMergeCompare;
    this.flaggedRecords = !this.flaggedRecords;
}

That doesn't work. No errors, just happened nothing. Logically that should toggle the view, but that doesn't.

How to make it live? Thank you in advance!

score 0 · Answer 1 · answered Mar 05 '20 at 19:10

0

Component B is child of component A.You can read this article about sharing Data between Angular Components. Use EventEmmiter to listen then events from each component

answered Mar 05 '20 at 19:10

Tzimpo

964
1
9
24

Great idea @ux__ui.designer!Can you press tick icon as answer for your question? – Tzimpo Mar 06 '20 at 18:47

score 0 · Answer 2 · answered Mar 05 '20 at 19:14

You can use @Output & EventEmitters, so essentially just pass the click event up to the parent Component A.

In Component B

<li><button type="button" (click)="sentCloseMerge()"></button><li>

@Output() componentBClicked= new EventEmitter();

public sentCloseMerge() {
    this.componentBClicked.emit();
}

In Component A

<app-component-B (componentBClicked)='closeMerge()'></app-component-B>

public closeMerge() {
    this.showMergeCompare = !this.showMergeCompare;
    this.flaggedRecords = !this.flaggedRecords;
}

I don't know for sure if the syntax is 100%, so I wouldn't just copy paste, but that's the idea! Does that help?

Thank you so much! I will try to do this! – ux__ui.designer Mar 06 '20 at 00:15 — ux__ui.designer, Mar 06 '20 at 00:15

How to bind components in Angular 8?

2 Answers2