Angular 2 - recipientes aninhados

No Angular JS, é possível aninhar contêineres uns dentro dos outros. O contêiner externo é conhecido como contêiner pai e o interno é conhecido como contêiner filho. Vejamos um exemplo de como fazer isso. A seguir estão as etapas.

Step 1 - Crie um ts arquivo para o contêiner filho chamado child.component.ts.

Step 2 - No arquivo criado na etapa anterior, coloque o seguinte código.

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

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

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

O código acima define o valor do parâmetro this.values ​​como “Hello”.

Step 3 - No arquivo app.component.ts, coloque o seguinte código.

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

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

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

export class AppComponent { }

No código acima, observe que agora estamos chamando a instrução import para importar o child.componentmódulo. Também estamos chamando o seletor <child-app> do componente filho para o nosso componente principal.

Step 4 - Em seguida, precisamos garantir que o componente filho também esteja incluído no arquivo 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 {}

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.