Use array of a component in another component in angular2

Question

I have an array declared public like :

public arr: Array<any> = []

in AddUserComponent which stores the name of users.

i need this array to be used in another component AddTopicComponent to display the user's names as a dropdown.

How do i use this array values in AddTopicComponent ? these two components are not parent-child component.

none of those was expected . got it working after including it in the Homecomponent then importing and using it in the desired component. i think its the simplest way. And that worked :) Thank You all for helping — nchand, Jan 02 '18 at 07:04

score 0 · Answer 1 · answered Dec 06 '17 at 04:45

0

You can use @Input for sharing data from container component to inner components. Check this for explanation: https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding

If the relationship between the components is not parent-child, you can use any of below approaches:

Using Services(Most Recommended).
Using Behavior Subjects from RxJS library.
Using browser storage(session/local) but least recommended as prone to data security.

answered Dec 06 '17 at 04:45

Peter

10,492
21
82
132

use @Input() arr : Array ; in the AddUser component ? then how to use the values in arr in AddTopicComponent ? – nchand Dec 06 '17 at 04:57
Nope! You use Input in child component not in the parent component. While invoking the selector of child component, you need to pass the value of the attribute named with Input. Kindly go through the docs shared in answer! – Peter Dec 06 '17 at 04:58

score 0 · Answer 2 · answered Dec 06 '17 at 05:46

Below example has both parent to child binding and child to parent binding.

Parent to child binding is done by property binding where master string is passed to child component by the custom property named childToMaster using @Input.
Child to parent binding is done by event binding using @Output. See childToMaster event.

Working demo

Parent component

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  //passing values from parent to child
  master : String="send from parent";

  //Getting value from child
  childToParent(name){
    this.master=name;
  }

}

Parent Template

<div>
  <span>Master to Child </span><input type="textbox" [(ngModel)]='master'>
</div>

<app-child [childToMaster]=master (childToParent)="childToParent($event)">

</app-child>

Child Component with template

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

@Component({
  selector: 'app-child',
  template: `
    <input type="textbox" [(ngModel)]='masterName'> 
    <button (click)="sendToParent(masterName)" >sendToParent</button>
    <div>{{masterName}}</div>
  `
})
export class AppChildComponent {
  //getting value from parent to child
  @Input('childToMaster') masterName: string;

  @Output() childToParent = new EventEmitter<String>();



  sendToParent(name){
    //alert("hello");
    this.childToParent.emit(name);
  }
}

Use array of a component in another component in angular2

2 Answers2