Sharing Data between Components in Angular

What people said

Recommends JeffD23 · 2017-06 · Stack Overflow · on “Angular 4 pass data between 2 not related components”

This is a case where you want to use a shared service, as your components are structured as siblings and grandchildren. Here's an example from a video I created a video about sharing data between components [this video] that solves this exact problem. Start by creating a BehaviorSubject in the service import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() export class DataService { private messageSource = new BehaviorSubject("default message"); currentMessage = this.messageSource.asObservable(); constructor() { } changeMessage(message: string) { this.messageSource.next(message) } } Then inject this service into each component and subscrib

Recommends Kacper Cieluch · 2017-08 · Stack Overflow · on “How to dynamically display different components type based on runtime constraints in Angular2+?”

You can dynamically load second component with [ngSwitch] directive. If you want to dynamically load them, build a code similar to this <div [ngSwitch]="variable"> <app-first *ngSwitchCase="1"></app-first> <app-second *ngSwitchCase="2"></app-second> </div> It's up to you how you will determine which component should be loaded. You can for example change value of a variable with jQuery of plain JavaScript to render specific component. Component will be automatically updated if you change a row. If you want to automatically update content so the data from 1st component matches 2nd, you have to use some cross component communication provided by Angular4 . Good explanation how to do this here: [

Recommends Abhijit Srivastava · 2017-11 · Stack Overflow · on “How to pass data between two components in Angular 2”

You can transfer data using service. Make a service that holds the data while you switch components. Below is an example. import { Injectable } from '@angular/core'; @Injectable() export class TransfereService { constructor( private router:Router, private companyServiceService:CompanyServiceService ) { } private data; setData(data){ this.data = data; } getData(){ let temp = this.data; this.clearData(); return temp; } clearData(){ this.data = undefined; } } Now Consider 2 components Sender and Reciever. Senders code : This code sets the data to the service and navigates to the receiver. import { Router } from '@angular/router'; import { TransfereService } from './services/transfer.service'; e

Recommends gatzkerob · 2018-01 · Stack Overflow · on “Angular 5x - Send value from one component to another without child/parent relationship”

The components don't have a parent/child relationship. That is, The first component doesn't have the second component's tag nested in it. It doesn't look like this: <app-parent> <app-child></app-child> </app-parent> It's like this: <app-root> <app-componentOne></app-componentOne> <app-componentTwo></app-componentTwo> </app-root> The first component has an unordered list <ul> . When I click one of the items <li> , I want the other component to show info about the clicked item. I'm not looking for a code solution at this point (unless you want) I just want a concept I can learn about to create my own code. Cheers. UPDATE I ended up using BehaviorSubject RxJS message service to pass an object t

Recommends user9364371 · 2018-10 · Stack Overflow · on “Angular 5 - EventEmitter is sending data only once”

I managed to make it work by passing the data through a shared service rather than @Input and @Output decorators. Now it's simpler, cleaner and easier to understand! data.service.ts import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() export class DataService { private cdSource = new BehaviorSubject<number>(1); currentCD = this.cdSource.asObservable(); constructor() { } changeCD(m: number) { this.cdSource.next(m); } } child.component.ts // Called everythime treeview is clicked sendNode(cd: number) { this.dataService.changeCD(cd); } parent.component.ts // Update methods when dataService changes values this.dataService.currentCD.subs

Recommends Gerardo Sabetta · 2018-11 · Stack Overflow · on “Get Value in different component Angular 6”

You're trying to get the property startPeriodeBooking from bookingvehicle which you have declared that's an Input property, that means, you're supposed to use the component like this <receive-booking-manage bookingvehicle="someInstanceOfThat"> in your template, that's how you "get the value in different component" it's called parent to child component communication, check this video for more info [this video] . If this doesn't work for you, please add your component templates to the question

Recommends CornelC · 2019-01 · Stack Overflow · on “Cascading dropdown fill method running more than one in Angular 7”

So you basically want to share data/state between siblings. This can be done in multiple ways and has been answered many times on SO (through a parent component, through a service or with events). Check out this video to understand better [this video]

Recommends Donovan · 2019-03 · Stack Overflow · on “Angular 7-Sharing variable between components dynamically”

Short version, components don't share variables with one another without assistance. In your case, I recommend you use an EventEmitter recognizing that the app.component is your parent and the datepicker-range is your child. The EventEmitter will allow you to trigger events from the change (i.e. data changes) that the parent can subscribe to. This is an awesome video on the subject of sharing data between components: [this video] Here's a solution that worked for me: datepicker.range.ts Update your imports to include EventEmitter and Output import {Component, Input, Output, EventEmitter} from '@angular/core'; Declare output variable as event emitter for the parent to subscribe to @Output() dateDi

Recommends Kat · 2019-07 · Stack Overflow · on “Share Component Data with Other Components”

You can definitely accomplish this with some of the methods shown in this brief YouTube video: [this video] You should also really consider using string interpolation here: burger html <li><a routerLink="/about" (mouseover)="getText(about)">{{about}}</a></li> <li><a routerLink="/what-to-expect"(mouseover)="getText(whatToExpect)">{{whatToExpect}}</a></li> <li><a routerLink="/gallery"(mouseover)="getText(gallery)">{{gallery}}</a></li> <li><a routerLink="/activities"(mouseover)="getText(activities)">{{activities}}</a></li> <li><a routerLink="/contact"(mouseover)="getText(contact)">{{contact}}</a></li> burger ts //Add Output and Event Emitter to your imports import { Component, OnInit, Output, EventE

Recommends Sameer · 2021-08 · Stack Overflow · on “Passing Values between two components in Angular”

What is `selectProducts`?, what is the relationship between the components?, Please refer this video [this video] you will get idea