Angular pass data to a shared module

Question

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

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

Answer 1

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)
   }
}

Answer 2

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>