Comments (5)
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>
from angular_components.
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>
from angular_components.
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.
from angular_components.
Any update? Component is unusable when we want to create tabs dynamically 😞
from angular_components.
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;
from angular_components.
Related Issues (20)
- material-dropdown-select does not work with reactive forms ngFormGroup, ngControl, ngFormControl HOT 1
- material-dropdown-select not showing error message when form model validation fails HOT 1
- material-dropdown-select changes its state to touched on focus instead of on blur
- How do i get suggestions when typing for angular_components WebStorm HOT 2
- SimpleHtml should allow target with rel="noreferrer"
- DateRangeEditorComponent unknown popupHandle input
- material-progress: Accessibility with Screen Readers like JAWS HOT 1
- Modal: Assertion failed when GlobalModalStack is enabled. HOT 1
- Feature Request for Material-Stepper make activeStepIndex an Input
- Update to new version of MDC
- Please update to support dart 2.9.0-5.0.dev HOT 2
- can't change material-dropdown-select [max-width], it's hard-coded HOT 1
- Please Update material components HOT 2
- Expand/collapse items in MaterialListComponent HOT 1
- Add missing `disabled` input attribute for `MaterialMonthPickerComponent`
- MaterialTreeComponent is not responding to selection change HOT 5
- ChangeDetectionStrategy.OnPush missing in a few components HOT 1
- Failure to resolve dependencies in Dart 2.12.0 HOT 2
- Null safety HOT 4
- Currently Incompatible with Dart 12.14.x HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular_components.