angular 4 and ng-template

Question

I'm getting this warning:

The <template> element is deprecated. Use <ng-template> instead ("
        [attr.tabIndex]="-1"
        [ngClass]="{'k-item': true}">
        [WARNING ->]<template *ngIf="template"
            [templateContext]="{

when using angular 4, is this being taken care of for the release version?

thanks

Answer 1

ng-template in angular 4 can be used as-

<div *ngIf="isValid; else notValidCondition">
     Welcome User
</div>

<ng-template #notValidCondition>Good Bye</ng-template>

Answer 2

You need to take care of that. You need to modify your code and change all occurences of

<template>

to

<ng-template>

<template> caused conflicts with other usages of the <template> tag, therefore the Angular team changed it to use <ng-template> for Angular purposes. It's a breaking change, therefore they didn't introduce this change in Angular2 but only in Angular4 according to semantic versioning rules.

Answer 3

Simply use <ng-template>, <template> is deleted from Angular 4 as it's too generic and create some name conflict, now Angular team decided have everything start with ng as it was and should be.

Also can use if else in the new templating, look at the simple example below:

<ng-template #laoding>
  <p>Loading...</p>
</ng-template>
<p *ngIf="auth | async; else laoding; let user">
  {{user.username }}
</p>

Answer 4

The problem might also not be in your code. For instance if you are using the last beta release of @angular/material@2.0.0-beta.2, you will get these when you use certain material components.

If that is the origin of your messages, fear not... a new material release that fixes this is said to be dropping any day now.

It needs to be said, also, that what you're seeing are deprecation warnings that will not produce errors in your application. But they are things that need to be corrected before migrating to the next major release.