CODEWITHSUNDEEP
angular
codemx
codemx

Reputation: 93

Angular pass data to a shared module

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

Upvotes: 4

Views: 12925

Answers (4)

yazantahhan
yazantahhan

Reputation: 3110

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>

Upvotes: 3

Amir Christian
Amir Christian

Reputation: 595

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>

Upvotes: 0

Neda Peyrone
Neda Peyrone

Reputation: 340

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>

Upvotes: 6

Adrita Sharma
Adrita Sharma

Reputation: 22213

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

Upvotes: 14

Related Questions