Angular 2 - Contenitori annidati

In Angular JS, è possibile annidare i contenitori uno dentro l'altro. Il contenitore esterno è noto come contenitore padre e quello interno è noto come contenitore figlio. Diamo un'occhiata a un esempio su come ottenere ciò. Di seguito sono riportati i passaggi.

Step 1 - Crea un file ts file per il contenitore figlio chiamato child.component.ts.

Step 2 - Nel file creato nel passaggio precedente, inserisci il seguente codice.

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

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

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

Il codice precedente imposta il valore del parametro this.values ​​su "Hello".

Step 3 - Nel file app.component.ts, inserisci il seguente codice.

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

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

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

export class AppComponent { }

Nel codice sopra, si noti che ora stiamo chiamando l'istruzione import per importare il file child.componentmodulo. Inoltre stiamo chiamando il selettore <child-app> dal componente figlio al nostro componente principale.

Step 4 - Successivamente, dobbiamo assicurarci che anche il componente figlio sia incluso nel file 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 {}

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.