Angular 2 - Contenedores anidados

En Angular JS, es posible anidar contenedores entre sí. El contenedor exterior se conoce como contenedor principal y el interior se conoce como contenedor secundario. Veamos un ejemplo de cómo lograrlo. Los siguientes son los pasos.

Step 1 - Crea un ts archivo para el contenedor secundario llamado child.component.ts.

Step 2 - En el archivo creado en el paso anterior, coloque el siguiente código.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'child-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class ChildComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

El código anterior establece el valor del parámetro this.values ​​en "Hola".

Step 3 - En el archivo app.component.ts, coloque el siguiente código.

import { 
   Component 
} from '@angular/core'; 

import { 
   ChildComponent 
} from './child.component'; 

@Component ({ 
   selector: 'my-app', 
   template: '<child-app></child-app> ' 
}) 

export class AppComponent { }

En el código anterior, observe que ahora estamos llamando a la declaración de importación para importar el child.componentmódulo. También estamos llamando al selector <child-app> del componente secundario a nuestro componente principal.

Step 4 - A continuación, debemos asegurarnos de que el componente secundario también esté incluido en el archivo app.module.ts.

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

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

import { 
   AppComponent 
} from './app.component';  

import { 
   MultiplierPipe 
} from './multiplier.pipe' 

import { 
   ChildComponent 
} from './child.component';  

@NgModule ({ 
   imports: [BrowserModule], 
   declarations: [AppComponent, MultiplierPipe, ChildComponent], 
   bootstrap: [AppComponent] 
}) 

export class AppModule {}

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.