I would like to dynamically build a component tree basing on some information received from AJAX calls.
How to programmatically add a component to the DOM from inside of other component? I have <outer-comp> and I would like, basing on some logic, insert an <inner-comp>. The following code just inserts the elements <inner-comp></inner-comp> to the DOM, and not actual <inner-comp> representation.
#NgComponent(
selector: 'outer-comp',
templateUrl: 'view/outer_component.html',
cssUrl: 'view/outer_component.css',
publishAs: 'outer'
)
class AppComponent extends NgShadowRootAware {
void onShadowRoot(ShadowRoot shadowRoot) {
DivElement inner = shadowRoot.querySelector("#inner");
inner.appendHtml("<inner-comp></inner-comp>");
}
}
Update:
I managed to render the inner component correctly in the following way, but I'm still not sure if this is the proper way:
class AppComponent extends NgShadowRootAware {
Compiler compiler;
Injector injector;
AppComponent(this.compiler, this.injector);
void onShadowRoot(ShadowRoot shadowRoot) {
DivElement inner = shadowRoot.querySelector("#inner");
inner.appendHtml("<inner-comp></inner-comp>");
BlockFactory template = compiler(inner.nodes);
var block = template(injector);
inner.replaceWith(block.elements[0]);
}
}
The API has changed in AngularDart 0.9.9:
BlockFactory now is ViewFactory
scope.$new now seems to be scope.createChild(scope.context)
injector.createChild(modules) now requires a list of modules (instead of a single one)
AngularDart 0.10.0 introduces these changes:
NgShadowRootAware not is ShadowRootAware
..value() now is ..bind(., toValue: .)
So the code of pavelgj now looks like so:
class AppComponent extends ShadowRootAware {
Compiler compiler;
Injector injector;
Scope scope;
DirectiveMap directives;
AppComponent(this.compiler, this.injector, this.scope, this.directives);
void onShadowRoot(ShadowRoot shadowRoot) {
DivElement inner = shadowRoot.querySelector("#inner");
inner.appendHtml("<inner-comp></inner-comp>");
ViewFactory template = compiler([inner], directives);
Scope childScope = scope.createChild(scope.context);
Injector childInjector =
injector.createChild([new Module()..bind(Scope, toValue: childScope)]);
template(childInjector, [inner]);
}
}
This would be a proper use of the block API.
class AppComponent extends NgShadowRootAware {
Compiler compiler;
Injector injector;
Scope scope;
DirectiveMap directives;
AppComponent(this.compiler, this.injector, this.scope, this.directives);
void onShadowRoot(ShadowRoot shadowRoot) {
DivElement inner = shadowRoot.querySelector("#inner");
inner.appendHtml("<inner-comp></inner-comp>");
BlockFactory template = compiler([inner], directives);
Scope childScope = scope.$new();
Injector childInjector =
injector.createChild(new Module()..value(Scope, childScope));
template(childInjector, [inner]);
}
}
Also, if you ever need to recompile the inner template make sure you do childScope.$destroy() on the previous childScope.
The above code samples on longer work because of changes in the Angular Dart library. Specifically ViewFactory.call which no longer takes an injector but takes a Scope and a DirectiveInjector. I've tried adapting what's above and I get very close. The component shows up but none of the bindings are replaced (I see {{cmp.value}} for example.
Here's the code I'm using. I think the issue here is that DirectiveInjector is coming in as null.
void main() {
IBMModule module = new IBMModule();
AngularModule angularModule = new AngularModule();
Injector injector = applicationFactory()
.addModule(module)
.run();
AppComponent appComponent = injector.get(AppComponent);
appComponent.addElement("<brazos-input-string label='test'/>");
}
#Injectable()
class AppComponent {
NodeValidator validator;
Compiler _compiler;
DirectiveInjector _injector;
DirectiveMap _directiveMap;
NodeTreeSanitizer _nodeTreeSanitizer;
Scope _scope;
AppComponent(this._injector, this._compiler, this._directiveMap, this._scope, this._nodeTreeSanitizer) {
validator = new NodeValidatorBuilder.common()
..allowCustomElement("BRAZOS-INPUT-STRING")
..allowHtml5()
..allowTemplating();
}
void addElement(String elementHTML) {
DivElement container = querySelector("#container");
DivElement inner = new DivElement();
inner.setInnerHtml(elementHTML, validator: validator);
ViewFactory viewFactory = _compiler.call([inner], _directiveMap);
Scope childScope = _scope.createChild(new PrototypeMap(_scope.context));
if (_injector == null) {
print("injector is null");
}
View newView = viewFactory.call(childScope, _injector);
container.append(inner);
newView.nodes.forEach((node) => inner.append(node));
}
}
class IBMModule extends Module {
IBMModule() {
bind(BrazosInputStringComponent);
bind(BrazosTextAreaComponent);
bind(BrazosButtonComponent);
bind(ProcessDataProvider, toImplementation: ActivitiDataProvider);
bind(AppComponent);
}
}
I did finally get this to work but was not happy with having to add a timer:
#Injectable()
class AppComponent{
NodeValidator validator;
Compiler _compiler;
DirectiveInjector _directiveInjector;
DirectiveMap _directiveMap;
NodeTreeSanitizer _nodeTreeSanitizer;
Injector _appInjector;
Scope _scope;
AppComponent(this._directiveInjector, this._compiler, this._directiveMap, this._nodeTreeSanitizer, this._appInjector, this._scope) {
validator = new MyValidator();
}
void addElement(String id, String elementHTML) {
DivElement container = querySelector(id);
DivElement inner = new DivElement();
container.append(inner);
Element element = new Element.html(elementHTML, validator: validator);
ViewFactory viewFactory = _compiler.call([element], _directiveMap);
if (_scope != null) {
Scope childScope = _scope.createProtoChild();
View newView = viewFactory.call(childScope, _directiveInjector);
newView.nodes.forEach((node) => inner.append(node));
Timer.run(() => childScope.apply());
} else {
print("scope is null");
}
}
}
EDIT
The package http://pub.dartlang.org/packages/bwu_angular contains this decorator/directive as bwu-safe-html
------
I use a custom directive for that
#NgDirective(
selector: '[my-bind-html]'
)
class MyBindHtmlDirective {
static dom.NodeValidator validator;
dom.Element _element;
Compiler _compiler;
Injector _injector;
DirectiveMap _directiveMap;
MyBindHtmlDirective(this._element, this._injector, this._compiler, this._directiveMap) {
validator = new dom.NodeValidatorBuilder.common()
..allowHtml5()
..allowImages();
}
#NgOneWay('my-bind-html')
set value(value) {
if(value == null) {
_element.nodes.clear();
return;
}
_element.setInnerHtml((value == null ? '' : value.toString()),
validator: validator);
if(value != null) {
_compiler(_element.childNodes, _directiveMap)(_injector, _element.childNodes);
}
}
}
It can be used like
my-bind-html='ctrl.somehtml'
Angular issue
I created an issue to include this functionality into Angulars ng-bind-html https://github.com/angular/angular.dart/issues/742 (declined)
Related
I have a custom form component that implements ControlValueAccessor. This component has an internal property touched.
export class BmInputComponent implements ControlValueAccessor, Validator {
private onTouchedCallback: () => {};
private touched: boolean = false;
registerOnTouched(fn: any) {
this.onTouchedCallback = fn;
}
onBlur() {
this.touched = true;
this.onTouchedCallback();
}
}
I need to implement a method like
markTouched() {
this.touched = true;
}
That could be called by the user of the component when markAsTouched is executed in the formControl: customInputControl.markAsTouched()
I cannot find an angular-way to do this.
#Edit:
Tried to inject the NgControl:
#Component({
selector: 'bm-input',
templateUrl: './bm-input.component.html',
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => BmInputComponent),
multi: true
}
]
})
export class BmInputComponent implements ControlValueAccessor, Validator {
private onTouchedCallback: () => {};
private touched: boolean = false;
constructor(#Self() #Optional() public _formControl: NgControl) {
this._viewDate = new Date();
if (this._formControl) {
this._formControl.valueAccessor = this;
this._formControl.statusChanges.subscribe(this.markTouched);
}
}
registerOnTouched(fn: any) {
this.onTouchedCallback = fn;
}
onBlur() {
this.touched = true;
this.onTouchedCallback();
}
markTouched() {
if(this._formControl.touched)
this.touched = true;
}
}
But I am getting Cannot instantiate cyclic dependency! NgControl when the component is invoked with a formControl.
Have you tried #SkipSelf() instead of #Self()?
You could try this:
constructor(private injector: Injector) {
}
ngDoCheck() {
let ngControl = this.injector.get(NgControl);
if (! ngControl.control) {
return;
}
this.touched = ngControl.control.touched;
}
The circular dependency is caused by having both the NG_VALUE_ACCESSOR in your #Component(...) providers, and injecting NgControl in the constructor. These are mutually exclusive.
See the example in the NG material documentation here: https://material.angular.io/guide/creating-a-custom-form-field-control#ngcontrol
If I have a AngularDart Component:
#Component(selector: "my-selector",useShadowDom: false,
templateUrl: "packages/test/test.html")
class MyComponent {
MyComponent() {
...
}
...
}
How can I get the templateUrl programmatically?
I want to avoid a constructor with an Element injected. An injected Injector would be OK.
Found the answer:
#Component(selector: "my-selector", useShadowDom: false,
templateUrl: "packages/test/test.html")
class MyComponent {
Injector _injector;
MyComponent(this._injector) {
}
String get url {
DirectiveMap _directiveMap = _injector.get(DirectiveMap);
var tuples = _directiveMap['my-selector'];
//Validate.isTrue(tuples[0].directive is Component);
Component annotation = tuples[0].directive;
//_logger.info("TemplateUrl: ${annotation.templateUrl}");
return annotation.templateUrl;
}
}
The following code defines the Polymer element
What do I need as a valid default constructor for this class?
My question is what is needed for a proper constructor
import 'package:polymer/polymer.dart';
import 'lib/NPIDefs.dart';
import 'dart:html';
/**
* A Polymer click counter element.
*/
#CustomTag('detail-panel')
class NPIDetailPanel extends PolymerElement {
#published #observable NPIRecord record;
#observable String detailPanelICON = "unfold-less";
NPIDetailPanel.created() : super.created() {
}
setValue(NPIRecord npiRec) {
record = npiRec;
}
void dremoveDetailPanel() {
Element e;
e = shadowRoot.querySelector('#dpanel');
if(e != null) {
e.remove();
}
}
The code below gets a The class 'NPIDetailPanel' does not have a default constructor error
Please show how to do a default constructor
in the definition of the class
void addDetailPanel(Event e) {
NPIDetailPanel e1;
e1 = new NPIDetailPanel();
}
/* How do I add a proper default constructor? */
You can create a new instance of a Polymer element using new Element.tag('some-tag');
Just add a factory constructor that contains this to your Polymer element class.
#CustomTag('detail-panel')
class NPIDetailPanel extends PolymerElement {
factory NPIDetailPanel NPIDetailPanel() => new Element.tag('detail-panel'); // <== added
#published #observable NPIRecord record;
#observable String detailPanelICON = "unfold-less";
NPIDetailPanel.created() : super.created() {
}
setValue(NPIRecord npiRec) {
record = npiRec;
}
void dremoveDetailPanel() {
Element e;
e = shadowRoot.querySelector('#dpanel');
if(e != null) {
e.remove();
}
}
}
see also Instantiating polymer element via dart code
I'm trying to create an angular dart component dynamically. I know it's not a best practice but I have to because of how my angular widgets are being inserted.
I based my work off of:
How to add a component programatically in Angular.Dart?
The code samples on longer work because of changes in the Angular Dart library.
I got this code to work but it's inconsistent. The solution was the Timer.run() to fire the scope.apply. The problem with that is:
It stinks to make a call like that and would perform terribly with lots of components
It seems to work randomly. Most of the time it does but occasionally it doesn't do the {{foo}} replacements
void main() {
IBMModule module = new IBMModule();
AngularModule angularModule = new AngularModule();
Injector injector = applicationFactory()
.addModule(module)
.run();
AppComponent appComponent = injector.get(AppComponent);
appComponent.addElement("<brazos-input-string label='test'/>");
}
class MyValidator implements NodeValidator {
bool allowsElement(Element element) {
return true;
}
bool allowsAttribute(Element element, String attributeName, String value) {
return true;
}
}
#Injectable()
class AppComponent {
NodeValidator validator;
Compiler _compiler;
DirectiveInjector _directiveInjector;
DirectiveMap _directiveMap;
NodeTreeSanitizer _nodeTreeSanitizer;
Injector _appInjector;
Scope _scope;
AppComponent(this._directiveInjector, this._compiler, this._directiveMap, this._nodeTreeSanitizer, this._appInjector, this._scope) {
validator = new MyValidator();
}
void addElement(String elementHTML) {
DivElement container = querySelector("#container");
DivElement inner = new DivElement();
container.append(inner);
Element element = new Element.html(elementHTML, validator: validator);
// inner.setInnerHtml(elementHTML, validator: validator);
ViewFactory viewFactory = _compiler.call([element], _directiveMap);
if (_scope != null) {
Scope childScope = _scope.createProtoChild();
View newView = viewFactory.call(childScope, _directiveInjector);
newView.nodes.forEach((node) => inner.append(node));
Timer.run(() => childScope.apply());
} else {
print("scope is null");
}
}
}
class IBMModule extends Module {
IBMModule() {
bind(BrazosInputStringComponent);
bind(BrazosTextAreaComponent);
bind(BrazosButtonComponent);
bind(ProcessDataProvider, toImplementation: ActivitiDataProvider);
bind(AppComponent);
}
}
To call ngBootstrap I used
void main() {
initPolymer()
.run(() {
ngBootstrap(module: new AppModule());
});
}
Since polymer 0.10.0-pre.8 this seems not possible anymore:
Dartium currently only allows a single Dart script tag per application, and in the future it will run them in separtate isolates. To prepare for this all the following script tags need to be updated to use the mime-type "application/dart;component=1" instead of "application/dart":
⪪script type="application/dart" src="main.dart"></script>
Only one Dart script tag allowed per document
But my main is not a component - it is a regular main!!!
Was easier than thought.
index.html:
<head>
<script type='application/dart;component=1' src='main.dart'></script>
</head>
main.dart:
import 'package:polymer/polymer.dart';
import 'package:angular/angular.dart';
import 'package:angular/angular_dynamic.dart';
// HACK until we fix code gen size. This doesn't really fix it,
// just makes it better.
#MirrorsUsed(override: '*')
import 'dart:mirrors';
void myRouteInitializer(Router router, RouteViewFactory views) {
views.configure({
'hello': ngRoute(
path: '/hello',
enter: views('views/hello.html')),
'goodbye': ngRoute(
path: '/hellopolymer/:callerID',
enter: views('views/hello-polymer.html'))
});
}
#NgController( selector: '[webapp-sample]', publishAs: 'ctrl')
class MyControler {
final Repository _repository;
MyControler(final RouteProvider routeProvider,this._repository) {
final int value = routeProvider.parameters["callerID"];
if(value != null && value != null) {
_repository.value = value;
}
}
int get value => _repository.value;
}
class Repository {
int value = 0;
}
class AppModule extends Module {
AppModule() {
value(RouteInitializerFn, myRouteInitializer);
value(Repository,new Repository());
type(MyControler);
factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false));
}
}
#initMethod
void init() {
dynamicApplication().addModule(new AppModule()).run();
}