Make available a variable for each component inside a custom module in angular 4

Question

I have a custom module in my angular 5 project. Custom module name:- Restaurant

This custom module has 5 components. They are:- a. Banner b. Menu c. Recommend d. Basket e.Restaurantlayout

Restaurantlayout is having all those four (Banner,Menu,Recommend,Basket) components and in Restaurant module route I am loading Restaurantlayout.

Until this point working fine.

I want when this module will be loaded then a variable will have some data by calling a service and that data will be available for each of the component. I have tried by doing @input() but it is not working in the custom module, but works great for app module.

How can I achieve this? Thanks in advance.

Show some code how exactly the service is used by the restaurant components. Is the service inside the providers list of the restaurant.module.ts? — Phil
– Phil, Commented May 3, 2018 at 3:52
For better understanding share some example so you can get a exact answer. What I understand is that you want to make available some data across all the components. If this is what you are looking for then you have two options, Component to Components communication OR use Data bus(Common service) to broadcast data and listen in all components to get that. — Nadeem Latif
– Nadeem Latif, Commented May 3, 2018 at 4:13

Nadeem Latif · Accepted Answer · 2018-05-03 04:30:01Z

Approach 1:

Component to component data passing

If you are using @Input() it means that you are passing data from a component to another component. so to do this you have to bind input from C1 the C2.

Parent Components:

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

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  outPutData: any;
  constructor() { }

  ngOnInit() {
  }

}

Parent Component parent.html

<app-child [inputData]="outPutData"></app-child>

You have done passing data from parent component, now time to get in child. to do so find the example below.

Child Component:

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

@Component({
  selector: 'app-child-component',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input("inputData") inputData: any;
  constructor() { }

  ngOnInit() {
    console.log(this.inputData);
  }

}

Approach 2:

Data bus(Common Service)

To implement this please follow this link

Collectives™ on Stack Overflow

Make available a variable for each component inside a custom module in angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related