component communication export angular 10 code example

Example 1: angular send data to parent component

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
      <button (click)="sendMessage()">Send Message</button>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message: string = "Hola Mundo!"

  @Output() messageEvent = new EventEmitter<string>();

  constructor() { }

  sendMessage() {
    this.messageEvent.emit(this.message)
  }
}

Example 2: input property angular

//passing properties to child elements
<app-slider [title]="'This is a title'"> </app-slider>

//inside the component slider i add just before the constructor :
.
.
@input() title: string;
constructor(){
}


//after this we can use these new property inside the .html file of the component
<div id='slider' class='slider-big'>
  <h1> {{title}}</h1>

</div>