I have a container component that has 2 other controllers nested in it. I have them set up like so
container -> component1 and container -> component2
My train of thought here was that I could transclude the HTML from my page into my container component.
<container> <component1></component1> <component2></component2></container>
and then in the container HTML <div ng-init="vm.init()" ng-transclude></div>
Problem is, my container isn't running at all, I added a console log to its init function and no code is running. While component1 and component2 run their init's.
Seems to be a large amount of documentation covering older angular versions. Which tell me that they need to be nested like so <div ng-controller="parentController"> <div ng-controller="childController"></div> </div
How do you nest components into each other in 1.5?
Looks like the issue was that I was attempting to put a ng-init and ng-transclude in the same element. My guess is that ng-transclude overrides everything in the element it is on.
so I moved the ng-init to another element and its working fine
<div ng-transclude ng-init="vm.init()"></div>
changed to
<div ng-init="vm.init()"> <section ng-transclude ></section> </div>
Related
I have a component called tab which has <ng-content select="[tabItem]"></ng-content>
Sometimes tabItem is inside other child components. My problem is Angular selects the content from direct children, not inner children (app-my-tab), is there any way to do it?
app.component.html
<app-tabs>
<div tabItem>
Tab 1
</div>
<div tabItem>
Tab 2
</div>
<app-my-tab></app-my-tab>
</app-tabs>
my-tab.component.html
<div tabItem>
My Tab
</div>
<div>
Other content
</div>
See this stackblitz
There is no solution for deep selection.
I thing it is logical, because:
understand and real code easily
easy to debug.
If you want really do that use *ngIf in app-my-tab.
To use *ngIF:
All element in app-tabs must have tabItem attribute
send your condition to show/hide some other element in to app-my-tab component. and app-my-tab receive it as #Input() property
in app-my-tab html use *ngIf to show or hide some element
Example: https://stackblitz.com/edit/deep-ng-content-2gyttv?file=src/app/app.component.html
I'm trying to pass html to a viewchild so it can add it to it's own components html. Until now I haven't found an answer how to solve this.
I'm completely new to Angular, so most of the answers I've read on alot of topics I don't quite understand which makes it pretty hard.
The parent is using NgbModal (#ng-bootstrap/ng-bootstrap) to open a bootstrap modal. Since I don't want to keep repeating the same code for the modal itself all trough the project, I want to use a component for it. The modal component (viewchild) is working, except that I can't manage to pass html to the modal component so it can use the html to fill in the modal-body.
Triggering the modal like:
this.modalService.open(content, options).result;
Is there some way to use the inner html for example like:
<app-modal #modal>
<img src="test.png" alt="test" />
</app-modal>
So the image will be the content of the bootstrap modal.
I managed to finally fix it by wrapping the included component into ng-template.
Parent component's html including the module/viewChild:
<ng-template #imageFileModalContent let-c="close" let-d="dismiss">
<app-modal>
<img [src]="msgFile" />
</app-modal>
</ng-template>
Modal's html (viewChild):
<div class="modal-body form-group">
<ng-content></ng-content>
</div>
Read : Content Projection
you can make use of ng-containt : Working Demo
app-modal.component.html (selector will be app-modal)
<div class="dynamiccont">
<ng-content></ng-content>
</div>
when you use this component like this
<app-modal #modal>
<img src="test.png" alt="test" />
</app-modal>
this will work for you, key part is to make use of ng-content which helps you to include content.
I haven't found a solution for this yet even looking at SO questions and answers.
I'm trying to build an Angular 2+ (I'm using updated Angular 4.x in particular) "container" component, accepting "child" components, and "2-way" binding data/events to them.
Basically I'm trying to do something like this HTML template, but I don't know (coming from Angular 1.x) the Angular 2+ way of writing the js/ts code of the component:
<!-- example "pseudo-html-template" use of "MyContainerComponent" and "MyChildComponent"s -->
<my-container-component>
<my-child-component name="Child 1">
Hello example 1 <code>HTML</code>!
</my-child-component>
<my-child-component name="Child 2">
Hello example 2 <strong>HTML</strong>!
</my-child-component>
<my-child-component name="Child 3">
Hello example 3 <i>HTML</i>!
</my-child-component>
</my-container-component>
<!-- example "pseudo-html-template" of "MyContainerComponent" -->
<ul>
<li *ngFor="/* [for any child in children] */">
<!-- [the child <my-child-component> with "2-way" data/event binding i.e. <my-child-component [selected]="children[$index].selected" [name]="child.name"> ...] -->
</li>
</ul>
For now I had to put everything inside the containter component and write the bindings with explicit indexes like <-- [...] --><my-child-component [selected]="children[3].selected" name="Child 3"><-- [...] -->
I basically need two things: access to the "ViewChildren" components inside the container component, show them with their inner HTML (and possibly retain their state/functionality as well?), and a way to dynamically add bindings to them on load from the container component code. If possible I'd like to achieve this with a similar template HTML code (ie. in my-app.component.html), instead of specifying the children html in the js/ts code of components
I have no clue where and how to look for solutions and documentation.
Am a Starter in angularjs. Having 5 more pages controlled over uiview to get the pages.
I need to change the style from container to container-fluid where i used uiview in index page.
In html,
<div class="container" ui-view> </div>
For only one page i need to change the class to container-fluid.
I tried like this.
In html,
<div ng-class="{container-fluid: clearance}" ui-view> </div>
In controller i mentioned,
$scope.clearance= true;
It does not renders the ngclass. Can anyone please help on this.
An object property name can't have a - in it without quoting that whole name
Try
<div ng-class="{'container-fluid': clearance}" ui-view> </div>
Also depends which controller you are referring to. If it is the controller referenced in the routing config, then it will only have scope inside the ui-view
I'm making a complex view with a parent directive, and some sub-directives nested in. I've run into a problem where it seems like variables aren't being passed through the layers of directives properly.
Here's the setup:
<header>
<div expandable expand="functionFromHeader">
<div votable show-vote="variableFromHeader">
...
<!-- from votable template -->
<vote>
<!-- from vote template -->
<div class="vote" ng-show="showVote">vote</div>
</vote>
</div>
</div>
<div class="contentGettingExpanded" ng-show="variableFromHeader">
...
</div>
</header>
Both the expandable directive and the votable directive use transclusion.
The function from the header scope "functionFromHeader" toggles the variable "variableFromHeader".
The problem is the variable starts out false, but the votes show up anyway. (In the link function I inspected it an it is coming through as a string "variableFromHeader" rather than the value of the variable.
The content that is supposed to expand and collapse, starts collapsed as it should, but once it is expanded, it doesn't collapse. The content just flashes on the screen.
How do I properly pass the variables through the directives?