CODEWITHSUNDEEP
angularangular5angular8
user11314257
user11314257

Reputation:

How to get value of variable from another component, not child?

I have tried to get value of variable from component DialogDictionariesTypesComponent using this:

@ViewChild(DialogDictionariesTypesComponent, { static: false })
dialogDictionaryTypes: DialogDictionariesTypesComponent;

ngOnInit() {
    console.log(this.dialogDictionaryTypes.dictionaries);
}

Where DialogDictionariesTypesComponent has:

public dictionaries: any[] = [];

Why I get an error:

ERROR TypeError: Cannot read property 'dictionaries' of undefined

Upvotes: 0

Views: 2887

Answers (3)

Poul Kruijt
Poul Kruijt

Reputation: 71961

When using ViewChild with {static: false} the property is available in (and after) the ngAfterViewInit hook

ngAfterViewInit() {
  console.log(this.dialogDictionaryTypes.dictionaries);
}

If you really need it in the ngOnInit, you can set static to true, but be aware that if you have any structural directive surrounding your child component, it will fail.

After reading your title, I see that the component you are looking for is -not- a child. In that case you should -always- use a service and inject this service in both components.

ViewChild is only used to obtain a reference of a component or HTMLElement instance declared inside your component's template

Also, your initial thought of accessing data from components is a bit flawed. You should never do this, because components are just used for views and interaction with the view, not for data storage. Try to keep them as dumb as possible.

@Injectable({ providedIn: 'root' })
export class DictonaryService {
  readonly dictionaries: Dictionary[] = [];
}

@Component({

})
export class DialogDictionariesTypesComponent {
  constructor(private ds: DictionaryService) {}

  ngOnInit(): void {
    console.log(ds.dictionaries);
  }
}


@Component({

})
export class SomeOtherComponent {
  constructor(private ds: DictionaryService) {}

  ngOnInit(): void {
    console.log(ds.dictionaries);
  }
}

In this example these components will log the same dictionary array. This is however very rudimentary and you should really look into using data streams using rxjs to make your life easier (maybe even state management). Harder at first, I agree, but once you get the hang of it, your code will be very happy with you.

Upvotes: 1

SuperMata
SuperMata

Reputation: 13

In angular services are used to share data with components.

Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service.

https://angular.io/tutorial/toh-pt4

I would create a service to stored data that I need in a different component that's not a child.

Upvotes: 0

Stefan
Stefan

Reputation: 1511

You probably need to use some service and rxjs Subject. Take a look there https://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject

Upvotes: 0

Related Questions