CODEWITHSUNDEEP
angularangular-material
GGizmos
GGizmos

Reputation: 3773

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

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"

true value, false value

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 class="container">
<mat-checkbox *ngIf="value" color="primary" [checked]="true" (click)="toggle()"></mat-checkbox>
<mat-icon class="x" *ngIf="!value" (click)="toggle()" color="warn">clear</mat-icon>
</div>

Upvotes: 0

Views: 971

Answers (2)

A B
A B

Reputation: 74

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 class="container">
 <mat-checkbox *ngIf="value" color="primary" [checked]="true" (click)="toggle()">{{label}}</mat-checkbox>
 <mat-icon class="x" *ngIf="!value" (click)="toggle()" color="warn">{{label}}</mat-icon>
</div>

Upvotes: 0

Mathew Berg
Mathew Berg

Reputation: 28750

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 class="container">
   <mat-checkbox *ngIf="value" color="primary" [checked]="true" (click)="toggle()"></mat-checkbox>
   <mat-icon class="x" *ngIf="!value" (click)="toggle()" color="warn">clear</mat-icon>
   <ng-content></ng-content> <!-- this line here -->
</div>

Upvotes: 1

Related Questions