CODEWITHSUNDEEP
angularcomponents
nhoyti
nhoyti

Reputation: 1997

unable to place html elements inside angular component

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!

Upvotes: 0

Views: 239

Answers (1)

wlf
wlf

Reputation: 3413

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.

Upvotes: 1

Related Questions