htmlinputelement - template reference angular 5
angular 5: templateRef.createEmbeddedView no es una función (3)
Cuando hace referencia a la cláusula * ngIf, else no puede ser un componente arbitrario, pero debe ser una plantilla ng.
Por ejemplo,
en un componente donde tienes un código fuente similar a este:
<div *ngIf="myCondition ; else elseSection"> <!-- ... --> </div> <div #elseSection> <!-- ... --> </div>El código fuente resultante debería verse así:
<div *ngIf="myCondition ; else elseSection"> <!-- ... --> </div> <ng-template #elseSection> <!-- ... --> </ng-template>
Aquí está el código que estoy tratando de poner a trabajar (angular 5):
import { Component, ViewChild, TemplateRef, ViewContainerRef } from ''@angular/core'';
@Component({
selector: ''vcr'',
template: `
<template #tpl>
<h1>ViewContainerRef</h1>
</template>
<div>Some element</div>
<div #container></div>
`,
})
export class VcrCmp {
@ViewChild(''container'', { read: ViewContainerRef }) _vcr;
@ViewChild(''tpl'') tpl: TemplateRef<any>;
constructor(
private viewContainerRef: ViewContainerRef
) {
}
ngAfterViewInit() {
console.info(this.viewContainerRef);
console.info(this._vcr);
this._vcr.createEmbeddedView(this.tpl);
this.viewContainerRef.createEmbeddedView(this.tpl);
}
}
El problema es que tengo este error ( templateRef.createEmbeddedView is not a function ) y realmente no entiendo por qué.
Este código se basa en este ejemplo https://netbasal.com/angular-2-understanding-viewcontainerref-acc183f3b682 así que supongo que debería funcionar.
¿Qué estoy haciendo mal?
En mi caso, el error se debió a que olvidé * (asterisco) antes de ngTemplateOutlet
Según angular 5 changelog:
La opción del compilador enableLegacyTemplate ahora está deshabilitada de forma predeterminada, ya que el elemento está en desuso desde v4. Utilice
<ng-template>lugar.
Así que debes usar ng-template lugar de template :
<ng-template #tpl>
<h1>ViewContainerRef</h1>
</ng-template>
o establecer enableLegacyTemplate en false :
platformBrowserDynamic().bootstrapModule(AppModule, { enableLegacyTemplate: true })
Pero debes saber que
La opción enableLegacyTemplate y el elemento <template> se eliminarán en Angular v6.