0

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

UntitledUserForEach
  • 105
  • 1
  • 11

1 Answers1

0

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

Artem S.
  • 543
  • 5
  • 16
  • i already used content projection in dashboard-panel to change title and content in quick-links component and other components. `
    ` how can i reuse quick-links component but with different title and content. i putted ng content ` ` but it won't work     – UntitledUserForEach Dec 28 '21 at 10:18
  • You can use content projection on your quick-links component which is inherited from dashboard-component but if you use such inheritance be aware that @Component metadata doesn't work on child component. So you should write quick-links own template, which in turn may use content projection as well. You can read more about Angular components inheritance here: https://stackoverflow.com/a/56108999/2234964 And please check updated Stackblitz – Artem S. Dec 30 '21 at 12:37