We are developing an application in Adobe AEM using angular 4.
Due to our tool limitation we are not able to add a component inside another component by using ng-selector (parent-child structure).
So currently we are creating the parent Component in HTML and including the Angular components inside by using AEM(tool) feature.
In one of the scenario we need to add a single component multiple times in the HTML page but then we are not able to target the each component to show/hide.
For example.
Template in Component1 :
<div *ngif="dynamicvalue">
<div>show</div>
</div>
My HTMl will look like below.
<div *ngif="dynamicvalue"> <!-- Component1 added for the 1st time-->
<div>show</div>
</div>
<div *ngif="dynamicvalue"> <!-- Component1 added for the 2nd time-->
<div>show</div>
</div>
<div *ngif="dynamicvalue"> <!-- Component1 added for the 3rd time-->
<div>show</div>
</div>
In the above scenario :
1.How can I target only the Component1 added at the 1st position to show/hide?
2.How can I target Component1 added at 1st & 2nd position to show/hide?
Related
I'm writing web components using VueJS and vue-custom-element package. The web component that I'm creating is a layout components containing multiple modules such as chat, userList and so on. I need to add the ability to add/remove elements from the layout at runtime.
How can it be possible?
<my-layout></my-layout>
This is a simple layout. How can I make these buttons work?
This is the current layout template:
<template>
<div>
<button>Add new chat module</button>
<button>Add new users module</button>
<div id="layout" class="row">
<div class="col-sm">
<my-chat></my-chat>
</div>
<div class="col-sm">
<my-users></my-users>
</div>
</div>
<block :menu="testMenu">Custom block</block>
</div>
</template>
These are possible solutions :
Calling a method inside the web component. (It's seem that it's not possible!)
document.getElementById("layout").addModule('chat')
Sending a configuration JSON as attribute containing the list of requested modules and their
count.
<my-layout conf='{"modules":{"chat":{"count":5}}"}'></my-layout>
Add a separate count attribute for each module.
<my-layout chat-count="5" users-count="2"></my-layout>
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 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.
I'd like to have Vue custom components loaded only after the route has been clicked.
Let's say my app's stripped down html structure looks like this:
<div id="admin">
<admin-menu><!-- component with routes --></admin-menu>
<div id="content-container">
<!-- want dynamically loaded Single Page Components here -->
</div>
</div>
I'd like content container to be the target, where the dynamically loaded Single Page Components should be placed.
The one thing I don't want is to predefine the custom components in the content container right from the start like this:
<div id="admin">
<admin-menu><!-- component with routes --></admin-menu>
<div id="content-container">
<my-component-1></my-component-1>
<my-component-2></my-component-2>
<my-component-3></my-component-3>
<my-component-N></my-component-N>
</div>
</div>
If I do that, they must be registered i.e. loaded when vue hits them on startup of the app and but I'd like the components to be lazy loading.
So how can I initialize and place a single file component in the target content-container only after the respective router link has been clicked?
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>