Angular same component different templates

Question

How can i reuse one component with different content in it. I have component quick-links that extends dashboard-panel component and has title and content. I want to reuse that quick-links component with different title and content

<dashboard-panel>
    <span class="title">Getting Started</span>
    <div class="content">
        <div class="wrapper">
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-promote">north_east</i>
                    <span>Promote Yourself</span>
                </a>
            </div>
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-pro-page">stars</i>
                    <span>Set Up Pro Page</span>
                </a>
            </div>
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-play">play_arrow</i>
                    <span>Set Up Blaze Player</span>
                </a>
            </div>
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-soundcloud">
                        <img src="assets/img/service-logos/soundcloud.svg" alt="soundcloud" class="">
                    </i>
                    <span>SoundCloud Monetization</span>
                </a>
            </div>
        </div>
    </div>
</dashboard-panel>

like in this screen

I can only change title of this component by using @Input because it's only 1 line but what if i need to change whole content too. And what's the best way to achive that

Answer 1

You can use the Content projection, please read details about it here

Here's how you can reuse your <dashboard-panel> component with different values inside of it:

    <dashboard-panel>
      <div class="title">Getting Started</div>
      <div class="button1">Promote Yourself</div>
      <div class="button2">Set Up Pro Page</div>
      <div class="button3">Set Up Blaze Player</div>
      <div class="button4">SoundCloud Monetization</div>
    </dashboard-panel>

And here's how the projection works inside the component that receives a projected content (notice <ng-content select="...">):

@Component({
  selector: 'dashboard-panel',
  template: `
  <span class="title">
    <ng-Content select="div.title"></ng-Content> <!-- Projection -->
  </span>
  <div class="content">
      <div class="wrapper">
          <div class="inner">
              <a href="" target="_blank">
                  <i class="material-icons icon-promote">north_east</i>
                  <span>
                    <ng-content select="div.button1"></ng-content> <!-- Projection -->
                  </span>
              </a>
          </div>
          <div class="inner">
              <a href="" target="_blank">
                  <i class="material-icons icon-pro-page">stars</i>
                  <span>
                  <ng-content select="div.button2"></ng-content> <!-- Projection -->
                  </span>
              </a>
          </div>
          <div class="inner">
              <a href="" target="_blank">
                  <i class="material-icons icon-play">play_arrow</i>
                  <span>
                    <ng-content select="div.button3"></ng-content> <!-- Projection -->
                  </span>
              </a>
          </div>
          <div class="inner">
              <a href="" target="_blank">
                  <i class="material-icons icon-soundcloud">
                      <img src="assets/img/service-logos/soundcloud.svg" alt="soundcloud" class="">
                  </i>
                  <span>
                    <ng-content select="div.button4"></ng-content> <!-- Projection -->
                  </span>
              </a>
          </div>
      </div>
  </div>
`,
})
export class DashboardPanelComponent {}

Stackblitz