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

** 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

user_7603109 · Answer

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

user_12203747 · Answer

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


    {{ member.name }}

In member-list.module.ts

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

In member-list.component.html

user_5613720 · Answer

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:

user_12150740 · Answer

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:

Angular pass data to a shared module

4 Answers