I am pretty new to angular, so please be patient.
I want to create a set of ui elements. Lets say, I have a section which is like this:
<section>
<h2 class="section-title">Title</h2>
<... html to make section collapsible .../>
<div class="section-body">
content goes here
</div>
</section>
Now everytime I want to use this, I have to copy paste it...
Is it somehow possible that I create my own template for this?
<my-section title="Some Title" collapsible="true">
content goes here
</my-section>
Please provide your code logic.
But I guess you are looking for iteration through some data, while the data in the example here is the items
<section>
<h2 class="section-title">Title</h2>
<... html to make section collapsible .../>
<div class="section-body" *ngFor="item of items">
{{ item }}
</div>
</section>
Related
This question might sound dumb, but I'll try it anyways:
Is it possible to use a component multiple times, but with different content? Something like a template.
To be exact, I want to write the component only once, but then use it in different places with different content - e.g. (I don't know whether that makes any sense and if so, how to realize it) by getting some text from an allocated model to fill a div, so that I can solely add a further model instead of editing the component itself?
Make use of the <ng-content>. Illustration:
app.component.html
<my-component>
<p>I'm getting projected into a component from outside because of ng-content</p>
</my-component>
my.component.html
<p>Data from my own component</p>
<ng-content></ng-content>
<p>Data from my own component</p>
By use of the <ng-content> you can project data from outside to within your component. You can make use of this in multiple ways, without changing the original component.
One way you can pass data to a component using input.
<my-component [text]="myText"></my-component>
And then in the component you can get the text using:
#Input() text: Person;
And display it in your template
You can use ng-content for this. Please find the below pseudo code
<!-- card.component.html -->
<div class="card">
<div class="card-header">
{{ header }}
</div>
<!-- add the select attribute to ng-content -->
<ng-content select="[card-body]"></ng-content>
<div class="card-footer">
{{ footer }}
</div>
</div>
<!-- app.component.html -->
<h1>APP COMPONENT</h1>
<card header="my header" footer="my footer">
<div class="card-block" card-body><!-- We add the card-body attribute here -->
<h4 class="card-title">You can put any content here</h4>
<p class="card-text">For example this line of text and</p>
This button
</div>
<card>
it's possible to target #kodak in accordion with div id?
I just want to make link www.xy.cz/#15248756/#kodak , something like this, when user click on link, it will redirect to the accordion and to text with id "kodak".
Thank you.
See code below
<div class="vc_tta-panel vc_active" id="15248756">
<div class="body">
<div class="content" id="kodak">
<p>text</p>
</div>
</div>
</div>
You can't have multiple fragment identifiers on a single element, so the only way to do this would be to change the accordion implementation so it didn't depend on fragment ids in the first place.
Have a look at Wikipedia how they are linking table of content to the respective sections.
In essence it is like:
link to Kodak Cameras
<h1 id="kodak">Kodak Cameras</h1>
I made a custom modal for my Angular 5 app, but I want to be able to edit the content in it.
As example I have the following bit of code
<app-modal> <p>Some Text!</p> </app-modal>
I want the modal to take the <p> tag and put it like this:
<div class="modal">
<div class="card">
<p>Some Text!</p>
</div>
</div>
So I can easily reuse the modal component and easily use it everywhere I need it. But I couldn't find if/how this works anywhere. If it's not possible, then I wonder what the next best way is.
Thanks in advance!
Thanks to the link from ochs-tobi, I found the thing I was looking for.
Just add <ng-content></ng-content> wherever you need in the component to be able to get the content within the tags of the component.
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';
}
I am using the DNN MobiNuke Module (v02.00.03) from DataQuadrant to create a mobile version of a website I have created. Everything is going well EXCEPT a weird issue I am running into with the Mobile Skins. I have a simple Mobile Skin that looks like this:
<div id="mobile_frame">
<div id="mobile_header">
...
...
</div>
<div id="main_wrap">
<div id="mobile_main" class="sub">
<div id="ContentPane" runat="server"></div>
</div>
</div>
<div id="mobile_footer">
...
...
</div>
</div>
The issue that is arising is that ANY content in the ContentPane that has an empty div tag will change itself when rendered in a mobile browser:
<div class="xxxx"></div>
Will change itself to
<div class="xxxx" />
The biggest problem that this is causing is that the browser is interpreting the tag as an opening div tag with no closing tag. Therefore it is placing an ending div tag essentially wherever it wants. It's causing ALL of the markup after this area to get very messed up.
Here is an example of the code as it should be, and how it is rendering on the page:
Should be:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
</div>
<div id="mobile_footer">
...
</div>
</div>
But it renders as:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
<div id="mobile_footer">
...
</div>
</div>
</div>
I can fix this in the markup that I have control of by putting inside of the tags, but I do not have the time/energy to go through EVERY module that might be showing up in the ContentPane to check for empty tags. In addition, there are places where I want an empty tag to fill it with content later with javascript.
Lastly, I did a TON of research to look this up and I cannot find a thing. The closest that I found is that this happens in XSLT when transforming some XML, but as far as I know MobiNuke is not doing that.
Any help is greatly appreciated. Thanks!
I have figured out the issue after having a discussion with the vendor. There is a setting in the module settings called "Enable content adaptation". Apparently the setting will try to make the HTML to be XHTML compliant, but it was definitely not working for me. Hope this helps anyone else seeing this.