Stack Overflow
Stack Overflow

Questions tagged [transclusion]

transclusion (verb: transclude) is a feature in multiple platforms allowing embedding of content from other sources.

Resources:

207 questions
5
votes
1 answer

Passing property to components inside ng-content (properties which aren't available in the component where the markup lies)

I am trying to develop a carousel. The desired end result should be that the developer would simply write the entire markup in one place (let's say in app.component.html) with only an options property and then, the carousel would take over. Problem…
MrCroft
  • 3,049
  • 2
  • 34
  • 50
5
votes
1 answer

Is it possible for the transclusion scope to access the directive scope

Continuing the discussion in Confused about Angularjs transcluded and isolate scopes & bindings transcluded html With the above general structure in the app, it is implied in the…
Sankar Vikram
  • 81
  • 2
  • 7
5
votes
1 answer

Dynamic template "transclusion" in Angular2

I am trying to achieve something like this: I have a model class called ObjectTypeA, ObjectTypeB and ObjectTypeC. There is also a factory ComponentFactory, which based on the type of object passed in will create different components:…
the_critic
  • 12,720
  • 19
  • 67
  • 115
5
votes
1 answer

AngularJS : How can I transclude an element into a template that uses ng-repeat?

I've got a carousel directive which includes some chunking to map the passed in array of items into an array of arrays of elements structure which then generates markup similar to the pseudo code below: …
Jannis
  • 17,025
  • 18
  • 62
  • 75
4
votes
1 answer

How to loop through section elements to project with ng-content

I'm building a stepper and am using "transclusion" with ng-content to dynamically grab section elements within the stepper tag. The stepper.component view works like this:
Ben Racicot
  • 5,332
  • 12
  • 66
  • 130
4
votes
1 answer

Angular 4 ng-content select not working on dynamically created transcluded elements

I am using the ComponentFactoryResolver to dynamically create an element to be inserted into my template, which uses ng-content for transclusion. It all works wonderfully until I add a select attribute to my ng-content. Please see this plunker which…
serlingpa
  • 12,024
  • 24
  • 80
  • 130
4
votes
0 answers

Allow some custom elements Angular2

Say I would like to permit specific custom elements (for example): @Component({ selector: 'transcludor', template: `
…
Abraham P
  • 15,029
  • 13
  • 58
  • 126
4
votes
1 answer

Pass data to transcluded repeated element from repeating component

In Angular 2 I want to put something line ng-content into ngFor inside of my component. But the problem is I need to pass some data ito the transcluded element. I found following solution for…
Qwertiy
  • 19,681
  • 15
  • 61
  • 128
4
votes
3 answers

Custom template(transclusion without ng-content) for list component in Angular2

I have a list component which shows only names. list component should be able to take custom template which will be given by user. List Component import {Component } from 'angular2/core'; @Component({ selector: 'my-list', template: `

This is…

Akhlesh
  • 2,389
  • 1
  • 16
  • 23
4
votes
3 answers

When to use Angular transclusion

I am reading angular transclusion which some examples from this page: http://www.c-sharpcorner.com/UploadFile/17e8f6/transclusion-in-custom-angularjs-directive/ This page gave useful examples. However I wonder when to use transclusion. The original…
Leo Vo
  • 9,980
  • 9
  • 56
  • 78
4
votes
1 answer

AngularJS : How to create a transcluding element directive that keeps attribute directives and can add new ones?

I've been working on this issue for two days now. I get the feeling it should be a lot simpler. Problem Description I'd like to create a directive that is used as follows: content and has…
mhelvens
  • 4,225
  • 4
  • 31
  • 55
4
votes
3 answers

Angular: difference when using template or templateUrl

I'm running into a strange issue when using the template attribute instead of the templateUrl one. In case of the latter, I can define multiple directives with isolated scope or the transclude option on a single element. This works as expected and I…
thomaux
  • 19,133
  • 10
  • 76
  • 103
4
votes
2 answers

How does one preserve scope with nested directives?

My goal is to create a flexible set of directives for reusable and lightweight UI elements. Each has an isolated scope, and many of them transclude content. I want each directive to be a black box - the user ideally wouldn't need to know whether it…
starchild
  • 496
  • 2
  • 8
4
votes
2 answers

Transclusion (true) - Combining values

Consider the following code (http://jsbin.com/IfejIWES/1/): HTML: JS…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a> <a href="../../questions/tagged/transclusion" class="post-tag grid--cell" title="show questions tagged 'transclusion'" rel="tag">transclusion</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 07 '14 at 20:33">asked Jan 07 '14 at 20:33</time> <a href="../../users/426422/mike-cheel" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/426422.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mike Cheel" /> </a> <div class="s-user-card--info"> <a href="../../users/426422/mike-cheel" class="s-user-card--link">Mike Cheel</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">12,626</li> <li class="s-award-bling s-award-bling__gold" title="10 gold badges">10</li> <li class="s-award-bling s-award-bling__silver" title="72 silver badges">72</li> <li class="s-award-bling s-award-bling__bronze" title="101 bronze badges">101</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-18675529"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>4</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/18675529/angularjs-how-to-transclude-and-replace-the-containing-element" class="question-hyperlink">AngularJS: how to transclude and replace the containing element</a></h3> <div class="excerpt">I am trying to create a set of AngularJS directives that will conditionally render mutually exclusive segments of block or inline page content. For example, I envisage a mechanism that will render just the nth child element: <selector…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a> <a href="../../questions/tagged/angularjs-directive" class="post-tag grid--cell" title="show questions tagged 'angularjs-directive'" rel="tag">angularjs-directive</a> <a href="../../questions/tagged/transclusion" class="post-tag grid--cell" title="show questions tagged 'transclusion'" rel="tag">transclusion</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 07 '13 at 16:36">asked Sep 07 '13 at 16:36</time> <a href="../../users/168614/tim-coulter" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/168614.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Tim Coulter" /> </a> <div class="s-user-card--info"> <a href="../../users/168614/tim-coulter" class="s-user-card--link">Tim Coulter</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">8,705</li> <li class="s-award-bling s-award-bling__gold" title="11 gold badges">11</li> <li class="s-award-bling s-award-bling__silver" title="64 silver badges">64</li> <li class="s-award-bling s-award-bling__bronze" title="95 bronze badges">95</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <a class="s-pagination--item" href="../../questions/tagged/transclusion_page=2" rel="prev" title="Go to page 2">Prev </a> <a class="s-pagination--item" href="../../questions/tagged/transclusion_page=1" rel="" title="Go to page 1">1</a> <a class="s-pagination--item" href="../../questions/tagged/transclusion_page=2" rel="" title="Go to page 2">2</a> <div class="s-pagination--item is-selected">3</div> <div class="s-pagination--item s-pagination--item__clear">…</div> <a class="s-pagination--item" href="../../questions/tagged/transclusion_page=13" rel="" title="Go to page 13">13</a> <a class="s-pagination--item" href="../../questions/tagged/transclusion_page=14" rel="" title="Go to page 14">14</a> <a class="s-pagination--item" href="../../questions/tagged/transclusion_page=4" rel="next" title="Go to page 4"> Next</a> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>