Display inner text of an angular component after the component template?-CodePudding

I designed a little check box that toggles between the look of a mat-checkbox when true and a red x when false, looks like this basically: depending on whether "value" is "true" or "false"

What I'd like to do is put some text next to the control, but can't figure out how to do that without having to style.

When I try something like:`

 <div><app-check-x>Pets allowed?</app-check-x> </div>`

the text "pets allowed" doesn't appear. If I put the text after the control, then I have to style the div to make sure it appears after the box and not on the next line, which is suboptimal fo me.

Here is the code for the component.

  export class CheckXComponent   {
  constructor() { }
  @Input('value') value : boolean = true;
 // @Output('value')    

  toggle() {
    this.value = !this.value;
  }
}

and the template:

<div >
<mat-checkbox *ngIf="value" color="primary" [checked]="true" (click)="toggle()"></mat-checkbox>
<mat-icon  *ngIf="!value" (click)="toggle()" color="warn">clear</mat-icon>
</div>

CodePudding user response：

I think you're looking for content projection: https://angular.io/guide/content-projection

This will allow the text to be in the component. So set up your template like this:

<div >
   <mat-checkbox *ngIf="value" color="primary" [checked]="true" (click)="toggle()"></mat-checkbox>
   <mat-icon  *ngIf="!value" (click)="toggle()" color="warn">clear</mat-icon>
   <ng-content></ng-content> <!-- this line here -->
</div>

CodePudding user response：

You could have another input for the checkbox component. Call it Label/text. You can then input the text and display it in the component template.

<app-check-x [label]="Pets allowed?"></app-check-x>

Component

export class CheckXComponent   {
  constructor() { }
  @Input('value') value : boolean = true;
  @Input() label:string; 
 // @Output('value')    

  toggle() {
    this.value = !this.value;
  }
}

Template

<div >
 <mat-checkbox *ngIf="value" color="primary" [checked]="true" (click)="toggle()">{{label}}</mat-checkbox>
 <mat-icon  *ngIf="!value" (click)="toggle()" color="warn">{{label}}</mat-icon>
</div>