Great post @Monica Di Martino?
I have a couple of extra comments/tips to add from my learnings converting templates.
By adding the following snippet to your Component (in the .ts file) you will be able to continue using {{feature.column.value}} in your templates.
ngOnInit() {
this.feature = this.data.feature;
}
Docs can be found here. https://v4.angular.io/api/core/OnInit
Logic that was previously in an “ng-init” directive in your templates should also go into the ngOnInit function.
“ng-show” and “ng-hide” do not have equivalent directive in angular so these will need to be changed to use *ngIf. e.g.
Before:
<div ng-show=”feature.col.value > 0”>{{feature.col.value}}</div>
After:
<div *ngIf =”feature.col.value > 0”>{{feature.col.value}}</div>
For ng-hide you will need to switch your Boolean logic
Before:
<div ng-hide=”feature.col.value == 0”>{{feature.col.value}}</div>
After:
<div *ngIf =”feature.col.value != 0”>{{feature.col.value}}</div>
Unlike ng-if and ng-for in previous versions, *ngIf and *ngFor cannot be used on the same tag as they are what is known as structural directives in angular (https://v4.angular.io/guide/structural-directives). To convert the template you will need to add the ngIf on a tag inside the for loop or filter the list in the Component .ts.