feat: Add information about EntryComponents, in example2 add ngComponentOutlet sample.

Author: alexis-landrieu-avanade

README.md

@@ -138,6 +138,12 @@ export function ɵɵreference<T>(index: number) {
     _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtextInterpolate"](ctx.checkView(_r1, "Component"));
 ```
 
+## EntryComponents
+Specifies a list of components that should be compiled when this module is defined. For each component listed here, Angular will create a ComponentFactory and store it in the ComponentFactoryResolver.
+
+> In Angular 9 (Ivy) EntryComponent has been deprecated and there is no need to put dynamic components to it because Factory is created in a static field on the component itself.
+- [EntryComponent - angular/angular/issues/33715](https://github.com/angular/angular/issues/33715#issuecomment-616017433 )
+
 ## Sources
 - [ElementRef, TemplateRef, ViewRef, ComponentRef and ViewContainerRef](https://gist.github.com/rajaramtt/f2bf4bb420ced6198334622d32695554)- [ng_template_outlet.ts](https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_template_outlet.ts)
 - [compiler/src/template_parser/template_parser](https://github.com/angular/angular/blob/master/packages/compiler/src/template_parser/template_parser.ts#L369​)
@@ -148,4 +154,5 @@ export function ɵɵreference<T>(index: number) {
 - [angular-ngfor-template-element](https://ultimatecourses.com/blog/angular-ngfor-template-element) Google
 - [benefit-of-using-ng-container-vs-template](https://stackoverflow.com/questions/54029503/benefit-of-using-ng-container-vs-template)
 - [Angular ng-template, ng-container and ngTemplateOutlet](https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/)
-- [angular-ng-content](https://blog.angular-university.io/angular-ng-content/)
+- [angular-ng-content](https://blog.angular-university.io/angular-ng-content/)
+- [Module EntryComponents](https://angular.io/guide/ngmodule-faq#when-do-i-add-components-to-entrycomponents)

src/app/example1/example1.component.html

@@ -1,5 +1,5 @@
 <pre>
-    <h4>Reminder</h4>
+    <h4>Template Reminder</h4>
 
     >   Native HTML Element
     <button #view1>Simple Button {{checkView(view1, "Native HTML Element")}}</button>

src/app/example2/example2.component.html

@@ -39,6 +39,9 @@ <h4>Template & Container Use Cases</h4>
 
     > Use Case n° 5.2 (use a container+template)
     <ng-container *ngTemplateOutlet="amazingTemplate"></ng-container>
+    
+    > Use Case n° 5.3 (use a container+component)
+    <ng-container *ngComponentOutlet="SimpleButtonComponent"></ng-container>
 
     <ng-template #amazingTemplate>
         <div *ngFor="let item of ['content']">

src/app/example2/example2.component.ts

@@ -1,10 +1,14 @@
 import { Component } from '@angular/core';
+import { SimpleButtonComponent } from '@app/example1/simple-button/simple-button.component';
 
 @Component({
   selector: 'app-example2',
   templateUrl: './example2.component.html',
   styleUrls: ['../example1/example1.component.sass']
 })
 export class Example2Component {
+  // This field is necessary to expose SimpleButtonComponent to the template.
+  SimpleButtonComponent = SimpleButtonComponent;
+
   constructor() { }
 }

src/app/example2/example2.module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Example2Component } from './example2.component';
-
-
+import { SimpleButtonModule } from '@app/example1/simple-button/simple-button.module';
+// import { SimpleButtonComponent } from '@app/example1/simple-button/simple-button.component';
 
 @NgModule({
   declarations: [Example2Component],
   exports: [Example2Component],
   imports: [
-    CommonModule
-  ]
+    CommonModule,
+    SimpleButtonModule
+  ],
+  // entryComponents: [
+  //   SimpleButtonComponent
+  // ]
 })
 export class Example2Module { }

src/app/sandbox/sandbox.component.html

@@ -1,7 +1,10 @@
-<!-- <app-example1>
+<!-- Template Reminder -->
+<app-example1>
     <button #view1>Simple Button {{checkView(view1, "Sandbox")}}</button>
 </app-example1>
 
-<app-example2></app-example2> -->
+<!-- Template & Container Use Cases -->
+<app-example2></app-example2> 
 
+<!-- Dynamic contents - Full -->
 <app-example3></app-example3>