Add support for ng-template since template is depreciated
See original GitHub issueSince 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:
- Created 7 years ago
- Reactions:17
- Comments:9 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
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.
@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 tong-template
,@angular/animations
etc