Questions tagged [angular-content-projection]
59 questions
8
votes
1 answer
Angular 8: How to use a Multi-Content-Projection / Multiple-Transclusion slot twice?
I have an Angular 8.2 project that has two different display modes (landscape|portrait)
And within each, there's a toolbar at top and at bottom, surrounding the main content.
The menu as well as the main content is module specific, thus I am using…
Frank N
- 9,625
- 4
- 80
- 110
5
votes
1 answer
How to access the native element projected by ng-content
This is my parent component html
This is my CardComponent
This is body
This is title
Pranoy Sarkar
- 1,965
- 14
- 31
4
votes
1 answer
template-outlet inside mat-select not working
I am trying to pass #tmp in the mat-select with template-outlet and I' am not able to display the select options. Below here is my code and a link to stackblitz
anonymous
- 1,499
- 2
- 18
- 39
4
votes
1 answer
Programmatically pass on projected content to children? (that would be rendered into a otherwise)
Say, I have a component that creates a child programmatically, how could I pass the content (that Angular would render into a
hoeni
- 3,031
- 30
- 45
3
votes
0 answers
How to get reference of Component from projected content
I am writing a common angular library component, where the consumers can pass on optional content/template/component through angular content projection mechanism. Below are some example classes to explain better.
The hierarchy…
codestack
- 31
- 2
3
votes
2 answers
[Angular Unit Test]: How can I mock QueryList in a Unit Test (No integration test)
In a Content Projection scenario I have the following scenario:
// my-component.ts
@ContentChildren(SelectOption) selectOptions: QueryList;
...
ngAfterContentInit() {
this.selectOptions.forEach((selectOption, i) => {
…
Luis
- 2,006
- 5
- 31
- 47
3
votes
1 answer
Is it possible to use ng-content in the app-root component?
I've got a working angular application. I want to integrate it with a content management system that produces static pages, but for this I need to use content projection from the index.html page.
Something like this:
jmgonet
- 1,134
- 18
- 18
2
votes
2 answers
How to update the styles of @ViewChildren (Or @ContentChildren) in Angular(v14)
I'm trying to create a carousel component that has n amount of child components based on whatever size list it will get. I want the parent (carousel) to control the styling for children as it manipulates the size of the list and track the indexes to…
lowkey
- 41
- 6
2
votes
2 answers
Angular: Content projection access data of component
I've a test component that receives an array of objects via @Input(). I want to modify the data according to some internal logic / extra buttons but also allow the caller to decide how the data should be displayed.
Example of the component, with a…
TCB13
- 3,067
- 2
- 39
- 68
2
votes
2 answers
Angular - show projected content in different locations via conditional logic
I am working on building a Header component in Angular and want to show the navigation at different locations in the DOM structure according to whether an input inputTwoRows has been set to true/false. The nav is added to the Header's template via…
decodedcreative
- 99
- 8
2
votes
0 answers
Angular Testing: How to test Content-Projected components
I have the following scenario:
I have 3 components:
carousel-images.component, that contains carousel images and next, prev buttons to update the "index" and it shares the index by @Output
carousel-info.component, that contains the text description…
Luis
- 2,006
- 5
- 31
- 47
2
votes
0 answers
Angular ngTemplate, ngTemplateOutlet, ngContent: Select Contents of Template
Angular ngTemplate, ngTemplateOutlet, ngContent: Select Contents of Template
I have 2 components: AppComponent (
Cody
- 9,785
- 4
- 61
- 46
2
votes
0 answers
angular: observe projected input disabled attribute
I'm looking for a way to get the disabled attribute of the projected with input. For being able to change the host element's behavior accordingly.
…
georgiy.zhuravlev
- 475
- 6
- 21
1
vote
1 answer
Getting a projected header element using @ContentChild?
Within this component demo I'm trying to grab the projected header element like this:
@ContentChild('header') header!: HTMLElement;
The demo tries to log the element within the ngAfterContentInit() method like this:
ngAfterContentInit() {
…
Ole
- 41,793
- 59
- 191
- 359
1
vote
0 answers
How to add directive to elements within ng-content
Here's what I'd like to do: I have a table and within one of the cells I'd like to have a options menu as a popup (implemented with Angular cdkMenu) that has multiple links as menu items in it.
The implementation of this menu is handled in…
mandrag.ora
- 11
- 2