How to pass data from app.component.ts to its app.module.ts in Angular?

Question

Due to the requirements of project I need to send data value dataOne in app.component.ts to its app.module.ts so that I can store it in variable moduleValue. Please refer code below and suggest how can achieve this transfer of data within files.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'formcheck';

  dataOne: any;

  getValues(val: any) {
    console.warn(val);
    this.dataOne = val;
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

let moduleValue: any;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
  
}

Why do you want to store the value in your module and e.g., not in a service? — Batajus
– Batajus, Commented Jul 26, 2022 at 10:02
@Batajus after that I have to inject inside some library. I just want data to be stored inside moduleValue, please suggest however possible — Pushpinder Singh
– Pushpinder Singh, Commented Jul 26, 2022 at 10:08
if you don't care about proper separation of concerns that just do whatever is easiest - attach the value to window — devmiles.com
– devmiles.com, Commented Jul 26, 2022 at 10:16
look at the answer from Mohamed Moumen below, his solution is even better because it's not introducing a global variable. — devmiles.com
– devmiles.com, Commented Jul 26, 2022 at 10:28

Mohamed Moumen · Accepted Answer · 2022-07-26 10:25:28Z

1

I'd suggest that you declare a variable or an observable in a service, however, since you mentioned that you need to do this within the same files you might want to export a variable from your component and import it into your module like so:

app.component.ts

export class AppComponent {
  title = 'formcheck';

  dataOne: any;

  getValues(val: any) {
    console.warn(val);
    this.dataOne = val;
    DATA = this.dataOne;
  }
}

export var DATA = '';

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DATA } from './app.component';

let moduleValue: any;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
  
}

answered Jul 26, 2022 at 10:25

Mohamed Moumen

265 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pushpinder Singh Over a year ago

Thanks for the answer but export var DATA is not getting updated even if the value inside getValues() changes. Could you suggest how to update data dynamically.

Prashant Singh · Accepted Answer · 2022-07-26 14:49:23Z

0

Here is the solution using service, I used BehaviorSubject for dynamic updation of value.

https://stackblitz.com/edit/angular-9pitmh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fdata.service.ts,src%2Fapp%2Fhello.component.ts

answered Jul 26, 2022 at 14:49

Prashant Singh

6911 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to pass data from app.component.ts to its app.module.ts in Angular?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related