share data between components angular

import { Component, Input } from '@angular/core';
//Child-Component
@Component({
  selector: 'app-child',
  template: `
      Say {{ message }}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childMessage: string;

  constructor() { }

}
======================================================================
import { Component } from '@angular/core'; 
//Parent-Component data transfer to Child-Component
@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentMessage = "message from parent"
  constructor() { }
}

Posted by: Guest on March-31-2020

import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: ` Message: {{message}} <app-child (messageEvent)="receiveMessage($event)"></app-child> `, styleUrls: ['./parent.component.css'] }) export class ParentComponent { constructor() { } message:string; receiveMessage($event) { this.message = $event } }

import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable() export class DataService { private messageSource = new BehaviorSubject('default message'); currentMessage = this.messageSource.asObservable(); constructor() { } changeMessage(message: string) { this.messageSource.next(message) } }

Code answers related to "share data between components angular"

Browse Popular Code Answers by Language

Answers for "share data between components angular"

Code answers related to "share data between components angular"

Code answers related to "TypeScript"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us