Creating multiple levels nested components in angular.

Passing data between nested components is achieved through an arrangement of defining input and output properties of the child-element in the parent component html and the @Input and @Output of the child component. So we want to create three levels up nested components.

So, here is an example what we can do

Our app module code will look like as

@NgModule({

  declarations: [

    AboutPage,FirstComponent,SecondComponent

  ],

  imports: [

    IonicPageModule.forChild(AboutPage),

    ],

})

export class AppModule{}

Kindly Note that here AppModule is not the root module but it is a lazy Loaded Component as well.

Now for implementing multiple levels nested components we will have to implement the component inside of the 's components template.

@Component({

  selector: 'first',

  template: ''

})

export class FirstComponent { ... }