Is it possible to call a child function from within the parent? I know to go child > parent, you can do parentApplication.functionName(parameters);, but what about going the other way... that is parent > child?
Yes, a component should have specific references to it's children:
myChild.function(functionArguments);
The function needs to public, though. I don't recommend calling methods in the parent from the child, though. That is a break of encapsulation.
Ever heard of using an id? or a data structure to store the child?
Also, it should be noted that doing parentApplication.functionName is a very bad coding practice.
Related
Hello so if some variable exists (token within) I want to change 2 divs order - turn them other way around, from controller.
I found way to do this with ng-repeat directive but I don't really want to use ng-repeat in this case because I already have many ng-repeats in this two divs and I think it may cause some problems, maybe even longer loading.
Is there any other way to change divs order from controller? Maybe I can just add some classes to elements whenever variable exists or not, if I remember good I can change elements order with flexbox help.
Could you guys show me path how to accomplish this task? I would be grateful
if you provide some little demo.
Nobody answered my question which I already have found solution for. Someone in comment section said that I should use ng-repeat because it's good solution but I could not really figure out how to use it and keep tone of html content inside those 2 divs. I don't want to bind all of it from controller, do I?
So what I did instead is wrap this 2 divs inside another div with display: flex and then used ng-class directive on this 2 divs inside new container to dynamically add classes with this rules:
1st div
.flex-container--child_1 {
order:2;
}
2nd div
.flex-container--child_2 {
order:1;
}
The ng-class add this two classes to divs whenever some variable exist like I wanted.
<div ng-class="{'flex-container--child_1': authentication.isAuth}">...</div>
I wrote this post if somebody ever came across same problem and find this question on SO.
I am implementing a recursive component that displays tabs and uses visibility to show only the active content. I choose this approach because the tab contents are expensive to generate and to layout from a DOM perspective.
based on this, i see that when i hide a tab, the nested child tabs are still visible.
I am thinking that the best way to handle this is by creating a set of css classes:
p-visible
p-visible-hidden
This way, I can recurse through the DOM elements when a tab is set to hidden and change any elements having a p-visible class to having the p-visible-hidden class instead. Similarly, when a tab is set to visible, i can switch all of the elements that have the p-visible-hidden class to p-visible.
So I'm wondering the best way to implement this in Angular2 - To me, the best way maybe to actually select the child DOM elements.
Thanks in advance for any help :)
test harness for component
tab layout component
I was able to solve the problem by creating an #Input boolean (called parentVisible) that indicates if the parent is visible or hidden. This property is cascaded down through the recursive hierarchy of components.
The parentVisible boolean is an additional filter on setting each child element's visibility (if parentVisible is false, the visibility is set to hidden, if parentVisible is true, then set the visiblity as before)
This strategy makes it possible to avoid direct DOM manipulation which is deemed good for unit testing and doing things in the Angular2 way :smile:
I have some widgets, QToolButtons to be exactly, and I initialize them like this:
QFrame *frmBackground = new QFrame(ui->centralWidget);
QToolButton *btnMenueExit = new QToolButton(frmBackground);
But now my problem. When I call frmBackground->setVisible(false), the child should disappear too, but thats not the case. The children are still visible and I would have to call setVisible(false) for every child. It's not like I can't do this, but I think I miss something essential about the concept of parent and child.
All of the widgets are organized in the same QGridLayout.
What concerns me is, that if I make the child<-->parent relationship in the designer, with dropping the child into the parent widget, the child is disappearing when I call parent->setVisible(false);
Are there some other parameters I have to set to make these properties to be passed to the child, like a property binding?
QLayout takes ownership of the widget, when you add one with addWidget(). Using parent argument in widget constructor is not necessary.
Setting one widget to be direct parent of another is not a good practice, you should always use layouts.
If you want to use a QWidget to hold child widgets you will usually want to add a layout to the parent QWidget.
setVisible() propagates to all children. If it doesn't work for child widgets then the widget is not their parent (anymore).
Alright, i'm creating a Sketchup model but i'm confused. The parent component is not taking it's children properties correctly. Is this normal?
Never mind. I fixed it! In case other people stumble on this problem: In every child component add the attribute you want to let the parent to Sum up.. (in my case i forgot to add the attribute "LenZ" to a component at the bottom of the list). If you do not add them the parent will not sum them.
I want to create an MXML container component that has some of its own chrome -- a standard query display, et al -- and that supports the addition of child components to it. Something a lot like the existing mx:Panel class, which includes a title label, but acts like a plain mx:Box with regards to adding children.
What's the easiest way to do this?
Edit:
To be clear, I want to be able to extend the container using MXML, so the "Multiple visual children" problem is relevant.
Extend a container and add a title label. Probably the <mx:Canvas/> will work here. Make the title a public var and include a var for the styleName of the label.
Then override the addChild() method so that any child that is added is added instead to the that is your container.
Leave enough space for your title when you position your Box element (i.e., give its y property enough space. If there is no title you may want to reclaim that space.
That's the basics. Customize to your heart's content.
EDITED TO ADD: I do this creating an ActionScript class first, extending the container I am targeting, and I add the "furniture" — items the class will always use, like title in your case — by overriding createChildren and calling super.addChild(item) for those items. Calling addChild from then on, even in MXML markup, adds items to the inner container.
We do this with states.
We put the chrome for the base container in a state (in mx:AddChild elements) and then use the initialize event to switch to that state when the control is created. All the chrome is then added to the container.
That gets round the multiple sets of visual children problem.
The downsides to this approach are:
You don't see the chrome when editing descendents of the base.
You can't directly access the parent chrome controls from descendent components as they are not there at compile time (instead, you need to define properties, methods or events on the base that the descendents can access)
However, it works well for us.