question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add support for ng-template since template is depreciated

See original GitHub issue

Since the latest release of Angular 2 4.0.0-rc.1 has introduced <ng-template> and deprecated <template> and template attribute, please update the Material component accordingly.

Currently when compiling with latest version it returns below warnings:

The <template> element is deprecated. Use <ng-template> instead ("[ERROR ->]<template><div class="mat-autocomplete-panel" role="listbox" [id]="id" [ngClass]="_getClassList()" #p"): MdAutocomplete@0:0
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("<cdk-focus-trap>[ERROR ->]<template cdkPortalHost></template></cdk-focus-trap>"): MdDialogContainer@0:16
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("[ERROR ->]<template><div class="mat-menu-panel" [ngClass]="_classList" (keydown)="_keyManager.onKeydown($event)"): MdMenu@0:0
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("span> </span><span class="mat-select-arrow"></span> <span class="mat-select-underline"></span></div>[ERROR ->]<template cdk-connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="clo"): MdSelect@0:511
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("[ERROR ->]<template cdkPortalHost></template>"): MdSnackBarContainer@0:0
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("[ERROR ->]<template><ng-content></ng-content></template>"): MdTab@0:0
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("]="selectedIndex == i" [disabled]="tab.disabled" (click)="tabHeader.focusIndex = selectedIndex = i">[ERROR ->]<template [ngIf]="tab.templateLabel"><template [cdkPortalHost]="tab.templateLabel"></template></templ"): MdTabGroup@0:531
The <template> element is deprecated. Use <ng-template> instead ("b.disabled" (click)="tabHeader.focusIndex = selectedIndex = i"><template [ngIf]="tab.templateLabel">[ERROR ->]<template [cdkPortalHost]="tab.templateLabel"></template></template><template [ngIf]="!tab.templateLa"): MdTabGroup@0:568
The <template> element is deprecated. Use <ng-template> instead ("late [ngIf]="tab.templateLabel"><template [cdkPortalHost]="tab.templateLabel"></template></template>[ERROR ->]<template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</template></div></md-tab-header><div class="m"): MdTabGroup@0:636
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("eTab.start)="_onTranslateTabStarted($event)" (@translateTab.done)="_onTranslateTabComplete($event)">[ERROR ->]<template cdkPortalHost></template></div>"): MdTabBody@0:205

Although the application compiles despite of the warning but the Tabs component which uses template doesn’t render properly. When we click 2nd or 3rd tab, the contents of these tabs overlaps the contents of first tab.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:17
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
naveedahmed1commented, Mar 2, 2017

As a note; the Material2 components using template were broken in Angular 4.0.0-rc.1, though the template parse warnings says “<template> element is deprecated”, but it seems that it wasn’t the real cause why these components weren’t working.

I added BrowserAnimationsModule to my main NgModule (AppModule in my case) imports and updated to Angular 4.0.0-rc.2 after which Material2 tabs are working properly.

Though it works but support for <ng-template> still needs to be added since <template> element is deprecated and its support will eventually be removed.

As mentioned here https://github.com/angular/angular/blob/master/CHANGELOG.md#animation-package

If you do need animations, libraries like Material will automatically import the module (once you install it via NPM), or you can add it yourself to your main NgModule.

This means that after Material team officially support Angular 4, we wont be required to add BrowserAnimationsModule to imports of our main NgModule. @kara @crisbeto please correct me if I am wrong.

3reactions
jmcgoldrickcommented, Feb 27, 2017

@naveedahmed1 see angular/angular#14737 regarding that specific error - note the solution offered there doesn’t work for me currently.

@crisbeto, given the project is still in beta, I don’t see the problem with asking consumers to run npm install --save @angular/...@next in the next milestone and updating to ng-template, @angular/animations etc

Read more comments on GitHub >

github_iconTop Results From Across the Web

angular 4 and ng-template - Stack Overflow
I'm getting this warning: The <template> element is deprecated. Use ...
Read more >
Deprecated APIs and features - Angular
Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a FormControl / FormGroup layer in the class ......
Read more >
Angular 5 Release: What's New? - Auth0
NgFor has been removed as it was deprecated since v4. Use NgForOf instead. This does not impact the use of *ngFor in your...
Read more >
C++ attribute: deprecated (since C++14) - cppreference.com
Language support library ... Concurrency support library (C++11) ... (since C++17); template specialization: template<> struct ...
Read more >
Angular Forms Guide: Template Driven and Reactive Forms
Template Driven Forms (similar to AngularJs ng-model) · The ngModel, ngForm and ngSubmit directives · Understanding the Form state CSS classes: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found