Ошибка: Нет провайдера для TemplateRef! угловой4

Я пытаюсь узнать, как мы можем использовать ссылку на шаблон в моем приложении angular4, так далеко от документации, которую я, кажется, понимаю, мы можем использовать представление из в templateRef, но когда я попытался реализовать то же самое, я получаю следующую ошибку

ОШИБКА Ошибка: Нет провайдера для TemplateRef!

ниже мой пример кода

import { Component, OnInit, EventEmitter, ViewChild, TemplateRef, ElementRef } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private template: TemplateRef<any>, private element: ElementRef) { }
  ngOnInit() {
    this.template.createEmbeddedView(this.element);
  }
}

<ng-template>
    <div style='border: solid 2px yellow;
    width: 100%;
    height: 50px;
    background-color: #adadad;'>

    </div>
</ng-template>
<div style='border: solid 2px red;
    width: 100%;
    height: 180px;
    background-color: #adadad;'>

</div>

здесь то, что я хочу реализовать, - это поместить html, присутствующий внутри компонента внутри файла .

ОБНОВЛЕНИЕ 1

я изменил свой код на этот

@ViewChild('tmp1') template: TemplateRef<any>;
  constructor(private element: ElementRef) { }
  ngOnInit() {
       this.template.createEmbeddedView(this.element.nativeElement);
  }


<ng-template #tmp1>
    <div style='border: solid 2px yellow;
    width: 100%;
    height: 50px;
    background-color: #adadad;'>

    </div>
</ng-template>
<div style='border: solid 2px red;
    width: 100%;
    height: 180px;
    background-color: #adadad;'>

</div>

но все же я не могу вставить элемент внутри шаблона