Angular Component Interaction / Communication

Types of Communication Input/Output: If you have two components that should exchange data with each other, than just use the @Input() and @Output() decorator: 

Here is a simple example:

• Component that should get Data:

@Component({
selector: 'app-compa',
...
})
export class CompA{
@Input() title: string;

.....
}

--------------------
compB.component.html:

<app-compa title="Title></app-compa>

That’s it! You can now simply pass the title to CompA.

Now we want to to let an other component know, that in a specific component e.g. a button was clicked.

Here is how it works:

sendfromhere.component.ts:

@Component({ 
selector: 'app-sender',
... 
})
export class SendFromHere{

@Output() clickedButton: EventEmitter = new EventEmitter();
   onClick(){
      this.clicked.emit(true);
    }
}

sendfromhere.component.html:

<button (click)="buttonClicked()"></button>

receiveButtonInfo.component.html:

<app-sender (clickedButton)="buttonClicked()"></app-sender>

receiveButtonInfo.component.ts:

@Component({ 

selector: 'app-receiver',
...
})
export class ReceiveButtonInfo{
  buttonClicked(){
    console.log("button was clicked, we know it now!");
  }
}