angular from parent to child code example

Example 1: send event to child component angular

Parent-Component

eventsSubject: Subject<void> = new Subject<void>();

emitEventToChild() {
  this.eventsSubject.next();
}


Parent-HTML

<child [events]="eventsSubject.asObservable()"> </child>


Child-Component

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

ngOnInit(){
  this.eventsSubscription = this.events.subscribe(() => doSomething());
}

ngOnDestroy() {
  this.eventsSubscription.unsubscribe();
}

Example 2: 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 3: 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>