How to include a lazy-loaded Component selector into another Component's HTML in Angular 2+

Issue

I am trying to achieve lazy load in angular 2.
I have created lazy load by following this link.
I have two components like home1 and home2. home1 has the top news section and home2 is for listing other news.
At first time only home1 will be displayed.
After the user scrolls the page, home2 have to be loaded in home1.(like calling partial view in MVC).

I tried by calling home2 in home1 as <app-home2-list></app-home2-list>

but getting an error.

Error

I don’t how to call home2 html in home1 html?.Is any other way available for implementing this?

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { MenuComponent } from './menu.component';
import { HomeComponent } from './home/home.component';
import { Const_Routing } from './app.routing';
import { HttpModule } from '@angular/http';
import { Home2ListComponent } from './home2/home2-list/home2-list.component';
import { Home1ListComponent } from './home1/home1-list/home1-list.component';



@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    HomeComponent,
    Home1ListComponent,
    Home2ListComponent
  ],
  imports: [
    BrowserModule,
    Const_Routing,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

home1-list.component.ts and home2-list.component.ts(both codes are same,api call is differ):

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ViewEncapsulation } from '@angular/compiler/src/core';
import { DatePipe } from '@angular/common';
import { Router } from '@angular/router';
import '../../../assets/scripts/endlessriver.js';
import * as $ from 'jquery';
import { SharedService } from '../../Services/shared.service';
import { Home1Service } from './home1.service';
import { Home2ListComponent } from '../../home2/home2-list/home2-list.component';

declare var jQuery: any;

@Component({
  selector: 'app-home1-list',
  templateUrl: './home1-list.component.html',
  styleUrls: ['./home1-list.component.css','../../../assets/styles/common.css','../../../assets/styles/endlessriver.css'],
  providers: [Home1Service,SharedService]
})
export class Home1ListComponent implements OnInit {

  constructor(public Service: Home1Service,public CommonService:SharedService) { }

  @ViewChild('marqueeID') input: ElementRef;

  HomeList:any;
  HomeList1:any;
  HomeList2:any;
  HomeList3:any;
  sectionName:string;
  datetime:string;
  productId:number=2;
  getListingData(sectionName)
  {
              this.Service.getListingNews(sectionName,15).subscribe(
                  data => {
                      this.HomeList = data.map(e => {
                          return { SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                      })
                  },
                  error => { console.log(error) });
                  this.Service.getListingNews("world",5).subscribe(
                    data => {
                        this.HomeList1 = data.map(e => {
                            return { Heading:'world',SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                        })
                    },
                    error => { console.log(error) });
                    this.Service.getListingNews("national",5).subscribe(
                        data => {
                            this.HomeList2 = data.map(e => {
                                return {Heading:'national', SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                            })
                        },
                        error => { console.log(error) });
                        this.Service.getListingNews("state",5).subscribe(
                            data => {
                                this.HomeList3 = data.map(e => {
                                    return { Heading:'state',SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                                })
                            },
                            error => { console.log(error) });
  }
  getHomeList(name: string) 
  {
    if(name=="0")
    {
      return this.HomeList1;
    }
    else if(name=="1")
    {
      return this.HomeList2;
    }
    else
    {
      return this.HomeList3;
    }
  }

  ngOnInit() {
      this.datetime=this.CommonService.getDateFormat(new Date(),'home').toString();
    this.getListingData('TopNews');
  }

  ngAfterViewInit() {

    jQuery(this.input.nativeElement).endlessRiver({

    });
    $( document ).ready(function() {
        $('.brkngBody').show();
    });
  }
}

home1.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Home1RoutingModule } from './home1-routing.module';
import { Home1ListComponent } from './home1-list/home1-list.component';
import { Home2ListComponent } from '../home2/home2-list/home2-list.component';
import { Home2RoutingModule } from '../home2/home2-routing.module';
import { Home2Module } from '../home2/home2.module';

@NgModule({
  imports: [
    CommonModule,
    Home1RoutingModule,
    Home2ListComponent
  ],
  exports:[
    Home2ListComponent
  ],
  declarations: [Home1ListComponent]
})
export class Home1Module { }

home2.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Home2RoutingModule } from './home2-routing.module';
import { Home2ListComponent } from './home2-list/home2-list.component';

@NgModule({
  imports: [
    CommonModule,
    Home2RoutingModule
  ],
  declarations: [Home2ListComponent]
})
export class Home2Module { }

home1-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Home1ListComponent } from './home1-list/home1-list.component';

const routes: Routes = [ {
  path: '',
  component: Home1ListComponent
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Home1RoutingModule { }

Demo

Solution

Try following code snippet.

//home2.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Home2RoutingModule } from './home2-routing.module';
import { Home2ListComponent } from './home2-list/home2-list.component';

@NgModule({
  imports: [
    CommonModule,
    Home2RoutingModule
  ],
  exports:[Home2ListComponent],
  declarations: [Home2ListComponent]
})
export class Home2Module { }

//Home1.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Home1RoutingModule } from './home1-routing.module';
import { Home1ListComponent } from './home1-list/home1-list.component';
import { Home2ListComponent } from '../home2/home2-list/home2-list.component';
import { Home2RoutingModule } from '../home2/home2-routing.module';
import { Home2Module } from '../home2/home2.module';

@NgModule({
  imports: [
    CommonModule,
    Home1RoutingModule,
    Home2ListComponent
  ],
  exports:[
    Home1ListComponent
  ],
  declarations: [Home1ListComponent]
})
export class Home1Module { }

DEMO

Answered By – santosh singh

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.