CODEWITHSUNDEEP
angulartypescript
samjhana joshi
samjhana joshi

Reputation: 2015

how to dynamically load app components according to data?

In angular project I want to dynamically load different component based on api data.In home page I have banner and news section. Instead of static design of banner coming to the top and news section always at the bottom, I want to load banner component and news component according to data coming from database multiple times with different data also. Code: home.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { AccountServiceProvider} from '../../providers/account-service/account-service';

@Component({
    selector      : 'app-home',
    templateUrl   : './home.component.html',
    styleUrls     : ['./home.component.scss'],
    encapsulation : ViewEncapsulation.None
})
export class HomeComponent implements OnInit {

    public banner           : any;
    public news             : any;

    constructor( private accountService : AccountServiceProvider ) {
        /* data is coming from WordPress API; client can choose either banner first or news first */
        this.accountService.getStartPageData().then( ( response: any ) => {
            for ( let entry of response ) {
                if ( 'banner_block' === entry.acf_fc_layout ) {
                    this.banner = entry;
                }
                if ( 'news_block' === entry.acf_fc_layout ) {
                    this.news = entry;
                }
            }
        });
    }

    ngOnInit() {
    }
}

home.component.html

<app-banner [bannerData]="banner"></app-banner>
<app-news [newsData]="news"></app-news>

banner.component.ts

import { Component, OnInit, ViewEncapsulation, Input, EventEmitter, Renderer2 } from '@angular/core';

@Component({
    selector      : 'app-banner',
    templateUrl   : './banner.component.html',
    styleUrls     : [ './banner.component.scss' ],
    encapsulation : ViewEncapsulation.None
})

export class BannerComponent implements OnInit {

    @Input() bannerData : any;

    constructor( private renderer : Renderer2 ) {}

    ngOnInit() {
    }
}

news.component.ts

import { Component, OnInit, ViewEncapsulation, Input, EventEmitter, Renderer2 } from '@angular/core';

@Component({
    selector      : 'app-news',
    templateUrl   : './news.component.html',
    styleUrls     : [ './news.component.scss' ],
    encapsulation : ViewEncapsulation.None
})

export class NewsComponent implements OnInit {

    @Input() newsData : any;

    constructor( private renderer : Renderer2 ) {}

    ngOnInit() {
    }
}

Now here instead of adding component for banner and news statically I want to load the component as per data arrives. How can this be done ? Can component html be loaded in component ts file ? If yes how ? I am still googling the solution but to no avail as of yet.

Upvotes: 0

Views: 94

Answers (1)

macvag
macvag

Reputation: 411

You could use ngIf directive for example:

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock><app-banner [bannerData]="banner"></app-banner></ng-template>
<ng-template #elseBlock><app-news [newsData]="news"></app-news></ng-template>

More info here https://angular.io/api/common/NgIf

Upvotes: 1

Related Questions