material-tab-panel does not update labels when material-tab label is changed.

[rwrozelle]

Inside a material-tab-panel I have the following:

    <material-tab *ngFor="let tab of tabs" [label]="tab.title"></material-tab>

In other code, I am able to update the tab.title, but do not see results in browser.

I am able to see results in browser for <div *ngFor="let tab of tabs">{{tab.title}}

[nshahan]

It looks like you are going about it right. I made a simple demo, my first guess is that you are missing a directive. Take a look and see if you are missing anything or have a typo hiding somewhere.

A quick example here with a dummy class for tabs

import 'package:angular2/angular2.dart';
import 'package:angular2_components/angular2_components.dart';

class Tab {
  String title;
  String text;
  Tab(this.title, this.text);
}

@Component(
    selector: 'my-app',
    styleUrls: const ['app_component.css'],
    templateUrl: 'app_component.html',
    directives: const [materialDirectives, NgFor],
    providers: const [materialProviders])
class AppComponent {
  List<Tab> tabs = new List<Tab>();
  AppComponent() {
    tabs.add(new Tab('one', 'Text in the first tab'));
    tabs.add(new Tab('two', 'Text in the second tab'));
    tabs.add(new Tab('three', 'Text in the third tab'));
  }
}

HTML template:

<h1>Testing Tabs</h1>
<material-tab-panel>
    <material-tab *ngFor="let tab of tabs" [label]="tab.title">
        <div>{{ tab.text }} </div>
    </material-tab>
</material-tab-panel>

[rwrozelle]

Try this, its not the initial creation, its later update of the tab title:

<h1>Testing Tabs</h1>

<div *ngFor="let tab of tabs">
     <material-input
             label="Tab Title"
             floatingLabel="true"
             [(inputText)]="tab.title">
     </material-input>
    <material-input
            label="Tab Text"
            floatingLabel="true"
            [(inputText)]="tab.text">
    </material-input>
</div>

<material-tab-panel>
    <material-tab *ngFor="let tab of tabs" [label]="tab.title">
        <div>{{ tab.text }} </div>
    </material-tab>
</material-tab-panel>
<br/>
<br/>
<div *ngFor="let tab of tabs">{{tab.title}}</div>

[TedSander]

This is a valid bug... or at least the documentation needs to be updated to better reflect what is going on. The tab labels are only read at initialization time here:
https://github.com/dart-lang/angular2_components/blob/master/lib/src/components/material_tab/material_tab_panel.dart#L94

Let me see if I can get a fix for you for the next release.

[deftomat]

Any update? Component is unusable when we want to create tabs dynamically 😞

[TedSander]

This is going to be more work than I would like thanks to onPush which we want to keep.

In the meantime to unblock you trackBy on the for loop can be used to have the objects change when either title of the tab changes. This will cause the Tab object to change and will reflect the different title.

Something like this:
<material-tab *ngFor="let tab of tabs trackBy titleFn" [label]="tab.title">
in controller
dynamic titleFn(num index, Tab tab) => tab.title;