4

I'm writing a code to get member list from API and display it in member card list (Module A). member card is a shared module (Module B). importing module B to module A and display as a list is works without issue (with just hard coded html). However I need to pass each member data from module A to Module B within the loop in order to show the data in member card. Please help me to get an idea on how to pass the data to module A to Module B

enter image description here

I have followed this reference https://medium.com/frontend-fun/angular-4-shared-modules-18ac50f24852 in order to create the member card list using shared member card module.

In my Module A I have imported the member card module

 import { MemberCardModule} from 'app/shared/member-card/member-card.module';

  declarations: [MemberListComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    MemberCardModule,
......

In component.html (Module A) following is the code for member card loop

<app-member-card *ngFor="let member of members"></app-member-card>

** I have members array within the component.ts (Module A)

During the loop, I need to pass each member data to the member-card template in Module B.

Please help

Improve this question
3
  • Why you need module B for this? why not on the same module? Commented Oct 26, 2019 at 11:17
  • this member card will be used in many places within the app. this is why I need to use it as a shared module Commented Oct 26, 2019 at 11:20
  • You're confusing modules and components. A parent component can pass data to a child component, using inputs. Whether the components are part of the same module or not doesn't change how you do that. And you don't pass data between modules, but between components. Commented Oct 26, 2019 at 11:45

4 Answers 4

Reset to default
14

To pass data to a shared module, do the following steps:

Module A:

imports: [
  BrowserModule,
  ModuleB.forRoot({
    memberData: memberData
  })
]

Module B

export class ModuleB{ 
  static forRoot(memberData): ModuleWithProviders {
    return {
      ngModule: ModuleBModule,
      providers: [ModuleBService,{provide: 'memberData', useValue: memberData}]
    };
  }
}

Module B Service

export class ModuleBService{

  constructor(@Inject('memberData') private memberData:any) {
    console.log(memberData)
   }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Many thanks. Guess I need to get the data to the component through the service with this approach.
Yes, this is the way to pass data to a module according to your question. But as provided in the other answers, for your particular requirement passing at component level will do
This is another question I m having can you kindly check this and give me your thoughts stackoverflow.com/questions/57934149/…
Yes sure. I agree, I understood that there was an issue with the way I asked the question when I looked at your answer. Surely there will be cases that this approach is much better than @Neda's answer - Many thanks Adrita
Yes, no issue. if somebody google search this question, will find this answer helpful as it is required in many cases. A good example is passing environment variable to a Custom Library Module
6

Example of using @Input() for MemberCardComponent class.

In member-card.module.ts

import { MemberCardComponent } from "./member-card.component";

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        MemberCardComponent
    ],
    exports: [
        MemberCardComponent
    ]
})
export class MemberCardModule {}

In member-card.component.ts

export class MemberCardComponent implements OnInit {

    @Input() member: any;

    constructor() {}

    ngOnInit() {}
}

In member-card.component.html

<div *ngIf="member">
    {{ member.name }}
</div>

In member-list.module.ts

@NgModule({
    imports: [
        ...
        MemberCardModule
    ],
    declarations: [
        MemberListComponent
    ]
})
export class MemberListModule { }

In member-list.component.html

<app-member-card [member]="member" *ngFor="let member of members"></app-member-card>
Improve this answer

1 Comment

This is another question I m having can you kindly check this and give me your thoughts stackoverflow.com/questions/57934149/…
3

You will need to add an Input in the app-member-card component that accepts a member.

In your MemberCardComponent:

export class MemberCardComponent {
  @Input() member: Member;

  constructor() {} ...

In the parent's template: 

<app-member-card [member]="member" *ngFor="let member of members"></app-member-card>
Improve this answer

2 Comments

Thanks I played with the code with this and always got the "member" as a string within the shared component. @Neda peyrone 's solution worked. it should insert [member]="member". anyway thanks,
You're right, my bad. Forgot to add the braces. Updated the answer
0

You can import MemberCardModule into AppModule directly. Or import into ShareModule and import ShareModule into AppModule. It is important to import Modules into AppModule. And then you can you MemberCardModule.

Regarding the display MemberCard, you should use *ngFor in its parent div.

Look at this:

<div *ngFor="let member of members">
  <app-member-card [member]="member" />
</div>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.