unable to place html elements inside angular component

Question

im new into creating angular web component. im struggling to find a way to embed html elements inside the angular component

<stepper>
    <step title="1"></step>
    <step title="2"></step>
    <step title="3"></step>

    <h1>THIS IS JUST A TEST</h1>
</stepper>

everytime i ran the component on the storybook (i mean inside the .stories.ts)

the h1 tag i have added does not display at all.. is there any requirements or necessary thing to do in order to embed html tag on the component that im currently creating?

but when i place the h1 tag outside the component it works

    <stepper>
        <step title="1"></step>
        <step title="2"></step>
        <step title="3"></step>
    </stepper>
<h1>THIS IS JUST A TEST</h1>

thanks!

What is the angular version you use?

ManeeshaIndrachapa
– ManeeshaIndrachapa

2022-01-31 06:42:02 +00:00
Commented Jan 31, 2022 at 6:42 — ManeeshaIndrachapa
– ManeeshaIndrachapa, Commented Jan 31, 2022 at 6:42

wlf · Accepted Answer · 2022-01-31 07:21:31Z

1

You need to use content projection (https://angular.io/guide/content-projection) within your <stepper> component template.

template:'
  // existing template
  <ng-content></ng-content>
  // existing template
'

Whatever you put inside stepper will be inserted in place of ng-content.

answered Jan 31, 2022 at 7:21

wlf

3,4231 gold badge24 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

unable to place html elements inside angular component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related