My Custom component data is not displaying inside cxOutletPos.
No issue with "static html code" inside cxOutletPos, It is working displaying properly.
<ng-template cxOutletRef="cx-footer" cxOutletPos="before">
<h1>welcome</h1>
<app-custom-header></app-custom-header>
</ng-template>
I don't think this is a Spartacus issue, as I tried your code, and in my case the custom component could also be displayed correctly in the outlet. Please refer to my test result. I am using Spartacus 2.1.0. Which version are you using?
Related
I have a angular 5 component that is using ngbootstrap and bootstrap 4 to display a tabset. The tabset does not style correctly.
I am using ngb elsewhere in the project and it seems to work fine elserwhere.
Here is my component template:
I'm importing ngbmodule into my sub module:
and I have it imported forRoot() in my app module:
I also made sure to add bootstrap.min.css to my angular-cli.json when troubleshooting (and made sure the file was there):
Yet, when I view my component, the ngb-tabset isn't rendering correctly at all:
I have restarted ng serve many times and checked my console for errors (clean), I'm not sure what could be the issue, as our ngb modals and ngb date pickers have been working fine (and still are) :'(
This was my problem:
<ng-template ngbTabContend>
<p> here's some content</p>
</ng-template>
notice Contend instead of Content. D'oh!
I am working with angular 2 rc4 and we are using fuel-ui http://fuelinteractive.github.io/fuel-ui/#/ to load a modal.
What we are trying to achieve is the following:
we have a login component that we want to inject into the fuel-ui modal the problem is that the actual modal html code (actual DOM) is getting loaded after.
Fuel-ui gives a tag into which the html for the modal gets loaded into.
I have researched and tried DynamicComponentLoader although found out it is now deprecated.
What I need is to know what is the best way to inject my login component content
into the rendered DOM (tag with modal-body class from bootstrap html).
I have searched but perhaps someone had the same issue and stumbled upon a better link that explains how to do this.
Thank you, in advance, for your help.
Nancy
This seems very old now. But i think the latest in Angular helps you use content projection into a component.
You can add <ng-content></ng-content> as the body of your modal. In the parent component view add your custom component wrapped in the modal component. When modal shows up, you will have your component in it's content.
Also, Angular supports dynamic component creation.
Component templates are not always fixed. An application may need to
load new components at runtime.
You can look it up here for any help:
dynamic-component-loader
I have an Aurelia application in which I'm trying to build a CMS component. This component will load data from the server and this data mainly contains slug, title and content fields.
I also have several global components defined in my application, and I want to be able to use those components in the server so when I pull that data my CMS component is able to transform/compile those custom elements.
An example would be a tab component. I have the tab component with this structure defined:
<tab-panel>
<tab title="First"></tab>
<tab title="Second"></tab>
</tab-panel>
The CMS component will contain a content property which I use to pass a string like this: '<tab-panel><tab title="First"></tab><tab title="Second"></tab></tab-panel>'
The component needs to compile that string and render it in its view. I've checked the enhance API, but it doesn't worked, at least for me. Any other suggestion to dynamically compile/render custom elements??
Thanks a lot in advance.
I've found the solution. I've used a compose element and InlineViewStrategy and it worked well, the components are shows and binding works as expected.
If your custom elements are registered globally using globalResources you can actually using the TemplatingEngine to dynamically insert content into the DOM and then compile it after-the-fact. This blog post goes into detail in how you can do it.
However, I would use this as a last resort. As is mostly always the case, there are much better ways to do something in Aurelia. Using the <compose> element is a great way to dynamically render content in your Aurelia applications and should always be the first port of call.
In learning the awesome Aurelia framework, I have learnt that you can use the following composition techniques however I am not sure what would be the difference.
<compose view="./nav-bar.html"></compose>
or
<require from="./nav-bar.html"></require>
Any clarification is appreciated.
<require> imports resources that you want to use in the view. It's conceptually similar to a require() JavaScript call in AMD or CommonJS module code (or an import statement in ES6 code). You would use <require> to import a custom element or custom attribute that you wanted to use in your view. You'll still need to explicitly render it like <nav-bar></nav-bar>.
<compose> renders the specified view.
We will use already created templates in our app and we need to use in the current app via require.
you can use css and javscript files also in require.
But from compose you can render your views by giving your view modal name.
You can see this link to have a better idea about compose.
http://patrickwalters.net/best-parts-of-aurelia-1-composing-custom-elements-templates/
I'm trying to load a view in to Aurelia using the compose template with the only the view attribute specified. ie.
<compose view="./test.html"></compose>
As soon as I add the above tag to and existing view I get the error message below.
UseView is not defined↵ at Function.normalize (http://localhost:9000/jspm_packages/github/aurelia/templating#0.10.2/view-strategy.js:40:27)`.
How can I use the compose element to load in a remote template?
As mentioned by #PW Kad this bug has now been resolved. Some really quick work by the aurelia team there!
https://github.com/aurelia/templating/issues/54