Create component template to use it multiple times - Angular

Question

This question might sound dumb, but I'll try it anyways:

Is it possible to use a component multiple times, but with different content? Something like a template.

To be exact, I want to write the component only once, but then use it in different places with different content - e.g. (I don't know whether that makes any sense and if so, how to realize it) by getting some text from an allocated model to fill a div, so that I can solely add a further model instead of editing the component itself?

If I understand you correctly there are several ways you can accomplish this. However, you need to show examples — Aluan Haddad
– Aluan Haddad, Commented Jun 15, 2019 at 16:08

Nicholas K · Accepted Answer · 2019-06-15 17:40:34Z

3

Make use of the <ng-content>. Illustration:

app.component.html

<my-component>
   <p>I'm getting projected into a component from outside because of ng-content</p>
</my-component>

my.component.html

<p>Data from my own component</p>
   <ng-content></ng-content>
<p>Data from my own component</p>

By use of the <ng-content> you can project data from outside to within your component. You can make use of this in multiple ways, without changing the original component.

edited Jun 15, 2019 at 17:40

answered Jun 15, 2019 at 16:45

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Kamran · Accepted Answer · 2019-06-15 16:10:29Z

2

One way you can pass data to a component using input.

<my-component [text]="myText"></my-component>

And then in the component you can get the text using:

@Input() text: Person;

And display it in your template

answered Jun 15, 2019 at 16:10

Muhammad Kamran

1,0377 silver badges11 bronze badges

Comments

Tony · Accepted Answer · 2019-06-15 16:14:22Z

You can use ng-content for this. Please find the below pseudo code

<!-- card.component.html -->
<div class="card">
    <div class="card-header">
        {{ header }}
    </div>

    <!-- add the select attribute to ng-content -->
    <ng-content select="[card-body]"></ng-content>

    <div class="card-footer">
        {{ footer }}
    </div>
</div>

<!-- app.component.html -->

<h1>APP COMPONENT</h1>
<card header="my header" footer="my footer">

    <div class="card-block" card-body><!--  We add the card-body attribute here -->
        <h4 class="card-title">You can put any content here</h4>
        <p class="card-text">For example this line of text and</p>
        <a href="#" class="btn btn-primary">This button</a>
      </div>

<card>

Collectives™ on Stack Overflow

Create component template to use it multiple times - Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related