CODEWITHSUNDEEP
javascriptangularangular5angular-template
Lijin Durairaj
Lijin Durairaj

Reputation: 3501

Error: No provider for TemplateRef! Angular4

I am trying to learn how we can use template ref in my angular4 application, so far from the documentation i seem to understand, we can use the view from the in the templateRef but when i tried to implement the same i get the following error

ERROR Error: No provider for TemplateRef!

following is my code sample

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>

here what i want to implement is place the html present inside the component inside the .

UPDATE 1

i have changed my code to this

@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>

but still i am not able to insert the element inside template

Upvotes: 0

Views: 7051

Answers (1)

Abelard Chow
Abelard Chow

Reputation: 618

Since you specify templateURL and styleURL, it looks like you are using Angular 5, not Angular 4. In this case, you want to put your template / html inside the template file you specified in the template. i.e. app.component.html

Upvotes: 1

Related Questions