Question 245107 in Html Question posted in
Some basic documentation can be found here.

Html – Dynamic Content Projection Angular

I am running Angular version 13.

I am trying to have a dynamic dialog card component that has some static tags such as a title. Then the rest of the content should be displayed dynamically dependant on what is sent in from the main component where it is being used.

I tried to get this dynamic content through from another component (we can call main component) opening up the dialog component tags and inside the tag creating the HTML I want to send through to my dialog component.

Something like this so you understand what I mean more visually:

//Dialog Component:
<Title>Some Title<Title>
<ng-content></ng-content>

//Main Component:
<DialogComponent>
  My Dynamic Data, tags, etc...
</DialogComponent>

I believed that Angular would understand that the code I have within my < DialogComponent > tag in the main component is the HTML content that should automatically be matched to the ng-content tag in the dialog component. This unfortunately does not work as intended. Perhaps I am not understanding how it works correctly.

I would like to avoid using templates, the one template solution I would be fine with is setting a template reference to the wrapping tag around the code in the main component and sending the reference into the dialog but unfortunately that did not work either.

I do not want to create the entire HTML code stack in the typescript file and send it in as a whole reference from there. This is not a clean solution in my eyes.

If anyone knows how to solve is using something similar to my first try using ng-content that would be the best solution for me.

Also, I cannot send the entire file in since the file has a lot more than what I want to send in, I want to wrap the HTML I want to send in into something and the dialog should receive it and link it to its corresponding tag in the file. Therefore making it dynamic to be used in multiple components, changing its content.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It was working all along I had missed to declare my component in my exports of my modules file, the way that I described I wanted it to work is exactly how it works. I open up the tags for the component and insert all the code I want to send into it. To decide where in my component the code will be placed is by using ng-content. Thanks for the answers trying to help, easy miss since I did not get any errors or warnings for it.


  2. 0

    It is quite simple , here is a small example for dynamic content projection.
    card.component.ts

    import { Component } from '@angular/core';
 
 
@Component({
  selector: 'app-card',
  template: `
    <div class="card">
    <div class="header">
      <ng-content select="header" ></ng-content>
    </div>
    <div class="content">
      <ng-content select="content" ></ng-content>
    </div>
    <div class="footer">
      <ng-content select="footer" ></ng-content>
    </div>
    </div>
  `,
  styles: [
    ` .card { min- width: 280px;  margin: 5px;  float:left  } 
      .header { color: blue}
    `
  ]
})
export class CardComponent {
}

    app.component.html

    <app-card>
 <header><h1>Angular</h1></header>
 <content>One framework. Mobile & desktop.</content>
 <footer><b>Super-powered by Google </b></footer>
</app-card>
  
<app-card>
 <header><h1 style="color:red;">React</h1></header>
 <content>A JavaScript library for building user interfaces</content>
 <footer><b>Facebook Open Source </b></footer>
</app-card>

    And in the component we use it as…

    <card>
  <div class="header">
    <h1>Angular</h1>
  </div>
  <div class="content">One framework. Mobile & desktop.</div>
  <div class="footer"><b>Super-powered by Google </b></div>
</card>
 
<card>
  <div class="header">
    <h1 style="color:red;">React</h1>
  </div>
  <div class="content">A JavaScript library for building user interfaces</div>
  <div class="footer"><b>Facebook Open Source </b></div>
</card>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search