I have a component A with its html/ts file. When I inherit a second component B from A, this will take all properties and method on the first. If I want to use the component A html, I can reference the comp A html in the templateUrl property.
I have a problem. I want use the component A html, but I want extend it. So my idea is "include" the first component html to the second. It's possible in Angular2? Is there another way?
I don't want to create an instance of component A in the component B. I want only the html markup.
EDIT:
In this example there is my problem:
https://stackblitz.com/edit/ng-content-projection-lzjwea
when I inherited the Hello2 ts, If I create an instance of hello component in hello2 html, it take its name property. I found three solutions:
Change all properties that need to be used in all inherit component to input and inject the
Duplicate html code
Find a way to reference the html of first component without creating an instance of it.
I think the best solution is the third. But I don't know a way to do it..
ng-content could be used to project dynamic content in a component.
For example, consider the following
hello.component.html
<div id='border'>
<h1>Base Component</h1>
<p>ng-content could be used for projecting dynamic content within a component</p>
<ng-content>
<!-- Dynamic content goes here -->
</ng-content>
</div>
So, now whatever that is in between
<hello>
<!-- dynamic html here -->
</hello>
app.component.html
<hello>
<div style="border: 2px solid red">
<h2>Child Component</h2>
<button id="sample1"> Sample 1 </button>
<button id="sample2"> Sample 2 </button>
</div>
</hello>
Example
Hope this helps
Related
I'm doing some project in React and I have some outer library which creates <div> outside of the <div class="root"> component (in root are all React generated html components) and show library functionality in this component outside of the root. I want to style this component and in the best way to pack it to React, but its not possible. So is there some possibility how to say to my outer component to copy position of some React component? I can style this outer component with some "fixed" coordinates but its so dirty way and I would have problems with different resolutions.
Example:
<body>
<div class="root> <div class="copy-to-this></div> </div>
</body>
<div class="librarycomponent"> </div>
I want from .librarycomponent to copy exact position of .copy-to-this. Thanks for answer!
I hope the title isn't misleading too much as I have no idea how else to call it, but here's the problem:
I am developing an app with Angular 2 and use the nested templates (hope that's the right name for them) in several instances.
Now the issue I have is that my app consists of several "widgets" which can contain other widgets. This can create a sort of circle in the template calls.
Example:
home.html:
<div> some html stuff </div>
<widget1 *ng-for="#widget of widgetList" [widget]="widget"></widget1>
widget1.html:
<div> some html stuff unique to widget1 </div>
<div *ng-if="widget.widgetSubList">
<div *ng-for="#widget of widget.widgetSubList">
<div [ng-switch]="widget.type">
<p *ng-switch-when="2"><widget2 [widget]="widget"></></widget2></p>
<p *ng-switch-when="3"><widget3 [widget]="widget"></></widget3></p>
</div>
</div>
</div>
widget2.html
<div> some html stuff unique to widget2 </div>
<div *ng-if="widget.widgetSubList">
<div *ng-for="#widget of widget.widgetSubList">
<div [ng-switch]="widget.type">
<p *ng-switch-when="1"><widget1 [widget]="widget"></></widget1></p>
<p *ng-switch-when="3"><widget3 [widget]="widget"></></widget3></p>
</div>
</div>
</div>
widgetSubList is a property of the widget that is filled if it has sub-widgets, the ng-if does work in this case and doesn't crash the code if there are no sub-widgets.
That's the point where the whole thing crashes since it creates the mentioned "circle" of widgets containing widgets that have been in the above part of the tree already since widget1 can call widget2 which can call widget1 again.
I can't change that structure since it's predetermined by the API I use in this case.
So now the question: Is there a way to have this work?
Since all widgets require different implementations, I can't really work around it without creating one giant html file filled with ng-ifs, which I would like to avoid.
PS: I edited the example a bit further to represent the code better.
the #Input part is present in the .ts files.
Right now, I only read out one additional level of sub-widgets from the API for test purposes.
What is a bit strange is that you don't have a loop of widgets within the widget1.html and widget2.html files. With your implement, you always remain on the same widget metadata, so it's normal that you have an infinite loop...
As a matter of fact, you need to have a recursive structure that would allow to define the structure of your component:
widgetList
widget
children
widget
children
widget
children
widget
children
widget
children
(...)
So when the current widget won't have children, the recursive loop will end.
So I would refactor your templates like this (for example for widget1.html):
<div> some html stuff unique to widget1 </div>
<div *ng-for="#subWidget of widget.children">
<div [ng-switch]="subWidget.type">
<p *ng-switch-when="2"><widget2 [widget]="subWidget"></widget2></p>
<p *ng-switch-when="3"><widget3 [widget]="subWidget"></widget3</p>
</div>
</div>
Each widget would have an input corresponding to the widget metadata:
#Component({
selector: 'widget1',
(...)
})
export class Widget1Component {
#Input()
widget: any;
}
Our team is building our first polymer all in one page app and we kind of have to reverse engineer a neglected component of the project. We need to set the title for the title bar in the core-scaffolding. This is easy on simple pages by using JS, however some pages have conditional templates that show content and each require their own titles.
eg
<core-scaffolding>
<div id="title">Dynamic Title goes here</div>
<core-animated-pages transitions="cross-fade">
<section>
<div cross-fade>
<my-element>
<template if="{{condition1}}"></template>
Content 1
</template>
<template if="{{condition2}}"></template>
Content 2
</template>
<template if="{{condition3}}"></template>
Content 3
</template>
</my-element>
</div>
</section>
<section>
<div cross-fade></div>
</section>
</core-animated-pages>
I was going to add an attribute on the template elements to be able to pass a title value, however I don't know how to use JS to find out which template is the one that is conditionally rendered (active). I can't seem to find any documentation on this. Also I want to build something reusable (not with IDs) that can be used globally on any page.
Can anyone provide any suggestions?
Cheers,
david
i don't think i would use conditional template for this. if that condition changes a lot the content of the template will be added and removed from the dom every time it is changed. i think it would be better to use the hidden attribute or use databinding to change the text dynamically.
hidden attribute
<span hidden?="{{!condition1}}">Content 1</span>
<span hidden?="{{!condition2}}">Content 2</span>
<span hidden?="{{!condition2}}">Content 3</span>
databinding
<span>{{content}}</span>
then you can change the databind in javascript like normal.
if (condition1) {
this.content = 'Content 1';
}
My module position in my Joomla template is just a div with a "row" class. When I add content to that module position using the custom html module and give it module class suffixes of "first", "mod-light" and "bord-left"it appears to nest 2 divs within my module position both with the same classes which is causing problems. How do I modify this so that it is not creating this nested structure or at least does not apply these classes to the inner div?
For example, if I simply entered this raw html into the editor...
"<p>...entered content appears here...</p>"
I would get this output from Joomla...
<div class="moduletable first mod-light bord-left span4">
<div class="custom first mod-light bord-left">
<p>...entered content appears here...</p>
</div>
</div>
How can I make Joomla do this instead...
<div class="moduletable first mod-light bord-left span4">
<p>...entered content appears here...</p>
</div>
You can use custom module chrome to create your own module layouts:
http://docs.joomla.org/Applying_custom_module_chrome
So I was wondering if anyone knows of a package/plugin for sublime or a service that lists class attributes within an HTML snippet.
For example I like to markup then work on the css. I keep finding myself splitting sublime into two halves and just manually scrolling through the HTML on the left and rewriting the the actual class name styles on the right.
Basically I have:
<section class="home-testimonials">
<h2 class="home-title">
<span>Testimonials</span>
</h2>
<div class="testimonial-wrapper">
<!-- Other divs with classes -->
</div>
</section>
And I want a list like this:
.home-testimonials
.home-title
.testimonial-wrapper
If it denotes hierarchy position even better. Thanks in advance!
I'm not sure about Sublime, but with regular JS you can select all elements with document.getElementsByTagName('*'), and then extract classes for each element with element.className.