I would like to aggregate statically defined child components with dynamical once that might be sourced from stream. I want a generic way to define carousel in this carousel I what have a typed collection of components. The collection can be defined statically or dynamically. Below is example:
import 'package:angular/angular.dart';
import 'package:angular/core.dart';
import 'package:angular_components/angular_components.dart';
/**
*
*/
@Component(
selector: 'md-text',
styleUrls: const ['md_text.css'],
template: '<li></li>',
directives: const [
materialDirectives,
]
)
class TextComponent implements OnInit{
@Input()
String name;
TextComponent([this.name]);
TextComponent.withName(String name)
: this(name);
@override
ngOnInit() {
}
}
@Component(
selector: 'md-texts',
styleUrls: const ['text_component.css'],
template: '<ol><md-text *ngFor="let component of components" [name]="component.name"></md-text><ng-content></ng-content></ol>',
directives: const [
CORE_DIRECTIVES,
materialDirectives,
TextComponent
]
)
class TextsComponent<TextComponent> implements OnInit
{
Set<T> _components;
Set<T> get components => _components;
addComponent(T component){
this._components.add(component);
}
removeComponent(T component) {
this._components.remove(component);
}
TextsComponent() {
this._components = new LinkedHashSet<T>();
TextComponent declarativeChannel = new TextComponent.withName("United States");
this.addComponent(declarativeChannel);
}
@override
ngOnInit(){
print("I am here");
}
}
in my dashboard component, I have statically defined the usage as follows:
<md-texts>
<md-text [name]="'Liberty'"></md-text>
<md-text [name]="'Life'"></md-text>
<md-texts>
The display is as following United States Liberty Life
What I want to do is have the "Liberty" and Life also be aggregated to my component collection so i can control it with next and previous button. I also only want to render them when their index is called for. What is the best way to do this in AngularDart.
I found a similar question with old version but with older version How to reference child component from its parent in AngularDart in AD 1.0.0 and How to reference child component from its parent in AngularDart in AD 1.0.0
Regards, Hopefully i have explained my problem and i will get clear direction on what is the correct way of addressing this design issue.
Aucun commentaire:
Enregistrer un commentaire