How to create an angular component that uses the contents of the component tag instead of an input-CodePudding

I would like to create a section component that takes the html specified between the start and end tag and adds a header. The primary reason for me to want this is to make sure the margins of headers and content are consistent across the entire site. I have tried to find how to do this but I don't really know how to formulate the question to get the answer i need. Here is an example of the component html usage and result I'm looking for

usage:

<custom-component [headerText]='example text'>
    <button>example content</button>
</custom-component>

result:

<custom-component
    <div>
        <h1>example text</h1>
        <button>example content</button>
    </div>
</custom-component>

CodePudding user response：

You can use @Input() definitions and html definitions similar to this examples. @Input() of type templateRef allow you to use any html code or string literal as you can see in html use example

 @Input() title: TemplateRef<any>;
 @Input() titleOptions: TemplateRef<any>;
 @Input() actions: TemplateRef<any>;

<mat-card >
    <mat-card-header >
        <mat-card-title>
            <ng-container *ngTemplateOutlet="title">
            </ng-container>
            <ng-container *ngTemplateOutlet="titleOptions">
            </ng-container>
        </mat-card-title>
    </mat-card-header>

    <mat-card-content >
        <ng-content> // Here puts html between your start and end tags component
        </ng-content>
    </mat-card-content>

    <mat-card-actions >
        <ng-container *ngTemplateOutlet="actions">
        </ng-container>
    </mat-card-actions>
</mat-card>

And this is an example of how I use it.

<ng-template #title>Custom Title here</ng-template>
 
<ng-template #actions>
    <button color="action" mat-dialog-close mat-raised-button>Cancel</button>
    <button (click)="submit()"   color="accent" form="form"
            mat-raised-button>
        Submit
    </button>
</ng-template>

<app-common-layout-dialog
        [actions]="actions"       
        [title]="title">
        
        <h1> Here put everything I need to use inside content section </h1>
        
</app-common-layout-dialog>

In fact, I have also defined @Input() templateRef content , but I deleted it to show you an example similar to your request

CodePudding user response：

You can take advantage of Angular - Content Projection (see the official docs here)

Let's assume we have ParentComponent and ChildComponent

parent.component.html

<app-child-component>
  <p question>
    Is content projection cool?
  </p>
  <p>Let's learn about content projection!</p>
</app-child-component>

child.component.html

<h2>Multi-slot content projection</h2>

Default:
<ng-content></ng-content> <!-- Will print "<p>Let's learn about content projection!</p>" -->

Question:
<ng-content select="[question]"></ng-content> <!-- Will print "<p>Is content projection cool?</p>" -->

You can use <ng-content></ng-content> to print what's inside of <app-child-component> tag

You can use <ng-content select="[tag]"><ng-content> to select specific content