How does ngTemplateOutlet works?

Question

I was making a table where user can do inline edit to its data. I got the code and made some tweaks according to my needs and it is working. But there I came across a code:

template: `
    <ng-container *ngTemplateOutlet="currentView"></ng-container>
  `

In this link what is 'currentView' referring to? I want to use this in my own code. What changes do I need to make this work?

Answer 1

From the provided code example, currentView refers to the value returned by the getter get currentView() {} here :

@Component({
  selector: 'editable',
  template: `
    <ng-container *ngTemplateOutlet="currentView"></ng-container>
  `
})
export class EditableComponent implements OnDestroy {
  @Output() update = new EventEmitter();
  @ContentChild(ViewModeDirective) viewModeTpl: ViewModeDirective;
  @ContentChild(EditModeDirective) editModeTpl: EditModeDirective;

  mode: 'view' | 'edit' = 'view';

  editMode = new Subject();
  editMode$ = this.editMode.asObservable();

  /***************
   *    HERE     *
   ***************/
  get currentView() {
    return this.mode === 'view' ? this.viewModeTpl.tpl : this.editModeTpl.tpl;
  }

Now, the error message probably means that this.viewModeTpl is undefined.

@ContentChild(ViewModeDirective) queries a ViewModeDirective which has [viewMode] as a selector. That is why it should target the <ng-template viewMode> element

As the code seems correct, I suspect a problem with the lifecycle. I suggest to change the code to something like this (only for debugging purpose, this piece of code is crap, but it will help to see if the problems comes from here):

  get currentView() {
    const template = this.mode === 'view' ? this.viewModeTpl : this.editModeTpl;
    return !!template ? template.tpl : undefined ;
  }