3

`ngAfterContentChecked() { console.log("Content checked"); }

ngAfterViewChecked(){ console.log("View checked"); }`

I am working on a project in Angular. I need to call a block of statements two times in a page - 1. When I click on a tab in the same component. 2. When I click on a link which is in the footer(A different component-child) where I can see both these buttons and links on the same page.

For calling these statements on click of the button and on the link in the footer where the statements are defined in one parent only. To check any update(click) from the another component(footer) I need to use ngAfterContentChecked() or ngAfterViewChecked() which in turn run many times(around every second just after component inits) which is not as useful for me as I need to run it only on the click of link on the footer and on the click of the button in the parent.

I need to run it only 4 times(2 times on the click of tabs of parent and two times on the click of links in the footer) but these two life-cycles give me results in the console more than 100 times, which is not the right way to use both of these two life-cycles.

kindly let me know if there is any other possible way to do so, it will be of great help to me, Thank you.

Abhilash Bhargava
  • 574
  • 1
  • 5
  • 17
Ayushi Jain
  • 342
  • 4
  • 13

1 Answers1

2

You can simply bind a function in (click) event .

Working Demo

Try like this:

Parent

.html

<button (click)="onClick()">Tab1</button>
<button (click)="onClick()">Tab2</button>

<hr>

<app-child (LinkClick)="onClick()"></app-child>

.ts

onClick(){
  console.log("Clicked");
}

Child (footer):

.html

<a (click)="linkClick()" href="#">Link 1</a>

.ts

@Output() LinkClick = new EventEmitter();

linkClick() {
  this.LinkClick.emit();
}
Adrita Sharma
  • 21,581
  • 10
  • 69
  • 79