Angular Material offers a powerful set of features for building your Angular application on. It’s time to take them to the next level. A project I’m working on needed to be able to edit, view, and delete data. Not wanting to reinvent the wheel. I had an idea, what about reusable field components that combined the ability to Edit, Delete, and View a field.

Please see my previous article in this series Angular Material String Component for the base class.

CheckboxFieldComponent

This time we are creating a Checkbox component. I find a checkbox is my second most often used form-field that I use. Below is the component code.

@Component({
  selector: 'mymiller-checkbox-field',
  templateUrl: './checkbox-field.component.html',
  styleUrls: ['./checkbox-field.component.scss']

})
export class CheckboxFieldComponent extends AbstractFieldComponent {

  componentValue: boolean  = false;

  @Output() valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Input()

  get value() {
    return this.componentValue;
  }

  set value(val) {
    this.componentValue = val;
    this.valueChange.emit(this.componentValue);
  }

  private backup: boolean = false;

  constructor(public languageService:LanguageService) {
    super(languageService);
  }

  backupValue():null {
   this.backup = this.value;
   return null;
  }

  restoreValue():null {
    this.value = this.backup;
    return null;
  }
}

We implement a [(value)] to pass in the data for this field, in this case a string. Next we implement the restoreValue(), and backupValue() from the base component. Can you get any simpler in your component file?

Now we need to create the HTML to actually display the field.

<ng-container *ngIf="mode ==='DISPLAY'">
  <mat-checkbox [(ngModel)]="value" disabled>
    {{label}}
    <mymiller-icon-button matSuffix icon="edit" (click)="edit()" *ngIf="allowEdit" [tooltip]="editLabel"></mymiller-icon-button>
  </mat-checkbox>
</ng-container>

<ng-container *ngIf="mode===EDIT_MODE">
  <mat-checkbox [(ngModel)]="value">
    {{label}}
    <mymiller-icon-button matSuffix icon="save" (click)="save()" [tooltip]="saveLabel"></mymiller-icon-button>
    <mymiller-icon-button matSuffix icon="undo" (click)="undo()" color="warn" [tooltip]="undoLabel"></mymiller-icon-button>
  </mat-checkbox>
</ng-container>

We switch based on the mode whether we are DISPLAY, or EDIT. Now we enter in the elements to show our field. You can see I just “disabled” the DISPLAY. However you will notice in this instance I did not add Delete or Clear, as they simply do not make sense in this case.

Also there is not full-width added to this component. I found it looked best letting it use the room it needed.

This is what the field will look like with no Label: