CODEWITHSUNDEEP
angularangular8
POV
POV

Reputation: 12015

How to initialize children component after parent?

I have component that has a service dependency:

<lib-reon-map-library> </lib-reon-map-library>

On this level there are some other components:

<lib-reon-map-library> </lib-reon-map-library>
<app-search></app-search>

How to initialize <app-search></app-search> after <lib-reon-map-library> </lib-reon-map-library> when all dependencies of <lib-reon-map-library> </lib-reon-map-library> is ready?

So, component where I first run service:

export class ReonMapLibraryComponent implements OnInit, AfterViewInit {
  constructor(private reonMap: ReonMapLibraryService) {}
  ngAfterViewInit() {
    this.reonMap.initialization(this.mapContainer.nativeElement as HTMLElement);
  }
}

Service is:

@Injectable({
  providedIn: "root"
})
export class ReonMapLibraryService {
}

Then I have registered this service in module:

@NgModule({
  declarations: [ReonMapLibraryComponent, MenuToolsComponent],
  exports: [ReonMapLibraryComponent, MenuToolsComponent]
})
export class ReonMapLibraryModule {}

And then I import this module ReonMapLibraryModule to another poject Angular in module AppModule:

@NgModule({
  declarations: [

  ],
  imports: [
    ReonMapLibraryModule,

  ],
  providers: [{ provide: LOCALE_ID, useValue: "ru" }, SearchHistoryService],
  bootstrap: [AppComponent]
})
export class AppModule {}

Upvotes: 1

Views: 1638

Answers (2)

Reactgular
Reactgular

Reputation: 54801

You could use <ng-content> to conditionally create dependent components without exposing logic.

<lib-reon-map-library>
   <app-search></app-search>
</lib-reon-map-library>

@Component({
   selector: 'lib-reon-map-library',
   template: `<ng-content *ngIf="ready$ | async"></ng-content>`
})
export class LibReonMapLibraryComponent {
    read$: Observable<any>; // emits when component is ready
}

Upvotes: 2

Adrita Sharma
Adrita Sharma

Reputation: 22203

You can set a flag isReady = false and initialize <app-search> only when it is true.

When your service dependency is ready, emit event to parent component and set isReady to true

Try like this:

reon-map-library component

@Output() DependencyReady = new EventEmitter() 

// on ready
this.service.getData().subscribe(res => {
    this.DependencyReady.emit();
})

parent-component:

.ts

isReady:boolean = false

.html

<lib-reon-map-library (DependencyReady )="isReady = true"> </lib-reon-map-library>

<app-search *ngIf="isReady"></app-search>

Upvotes: 1

Related Questions