Reusable text not showing-CodePudding

I have a component that has some text that I want to reuse in another compnent however it is not showing for me

Here is my code

Reusable component

@Component({
  selector: 'header-bar',
  templateUrl: 'header-bar.component.html',
})
@Input() text: string = '';

HTML

<ng-template #headerTemplate>
            <span>{{ text }}</span>
</ng-template>

Component I want to use the header bar in TS

public text: string = "my text";

HTML

<header-bar [text]="text"></header-bar>

I don't see nay error or any thing showing up. Any idea what I am mising?

CodePudding user response：

I don't know why you are using ng-template ideally the template should just be :-

<span>{{ text }}</span>

If you still want to use ng-template you can use it like :-

<ng-template [ngIf]="true" #headerTemplate>
            <span>{{ text }}</span>
</ng-template>