Add Button Toggle component

[richard-to]

https://material.angular.io/components/button-toggle/overview

[CelaniDe]

I noticed this feature request and I’m interested in working on it. I believe it would greatly benefit the project and I'm excited to contribute.

[richard-to]

Sure. Feel free to give it a try. This component I believe should be most similar to the radio button component. So it's a good starter task.

Some helpful documentation to start:

• Setting up dev environment: https://google.github.io/mesop/internal/development/
• Building components: https://google.github.io/mesop/internal/new_component/ (we have a cli tool that will generate the boilerplate for creating a new component

---

We also recently set up a .devcontainer config for Github Codespaces. So if you fork the repo, you should be able to get started right way by creating a Github Codespace. The free tier is a bit slow for installing everything.

You can also use .devcontainer with VSCode remote containers if you have Docker / Docker Compose installed.

Right now, we don't have any instructions for using these two approaches yet. And I would say it's "experimental" in that we haven't tested these environments out much yet.

But if you want to give help us test these dev environments out, that would be great too. Probably some kinks to work out with the dev flow.

[CelaniDe]

Thank you very much for your guidelines. I am working on it

[CelaniDe]

I have a question. I Read the documentation about building components with the scaffolding script. I did it but when i import the MatButtonToggleModule on the ButtonToggleComponent it shows on the web ui infinite loading. Could you please help me? thanks in advance

@Component({
  selector: 'mesop-button-toggle',
  templateUrl: 'button_toggle.ng.html',
  standalone: true,
  imports: [MatButtonToggleModule], //line that cause the bug
})

JavaScript Error: The directive '_MatButtonToggleGroup' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

[richard-to]

The issue sound familiar. My random guess is that you'll need to import the module.

Here's an example from table component. You'll see the first line we needed to import the MatTableModule. Maybe you need to do something similar. But maybe you already did that and didn't show that snippet.

import {MatTableModule} from '@angular/material/table';
import {Component, Input} from '@angular/core';
import {
  TableType,
  TableRow,
  TableClickEvent,
} from 'mesop/mesop/components/table/table_jspb_proto_pb/mesop/components/table/table_pb';
import {Channel} from '../../web/src/services/channel';
import {
  UserEvent,
  Key,
  Type,
} from 'mesop/mesop/protos/ui_jspb_proto_pb/mesop/protos/ui_pb';

@Component({
  selector: 'mesop-table',
  templateUrl: 'table.ng.html',
  standalone: true,
  imports: [MatTableModule],
})

Can you also post a link to your branch on your fork? In case that does not solve the problem, I can take a look at the code more closely.

[CelaniDe]

Thanks for your response. Yes i have import it. The following code is the whole .ts file

import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
import {
  Key,
  Type,
  UserEvent,
} from 'mesop/mesop/protos/ui_jspb_proto_pb/mesop/protos/ui_pb';
import {ButtonToggleType} from 'mesop/mesop/components/button_toggle/button_toggle_jspb_proto_pb/mesop/components/button_toggle/button_toggle_pb';
import {Channel} from '../../web/src/services/channel';

@Component({
  selector: 'mesop-button-toggle',
  templateUrl: 'button_toggle.ng.html',
  standalone: true,
  imports: [MatButtonToggleModule],
})
export class ButtonToggleComponent {
  @Input({required: true}) type!: Type;
  @Input() key!: Key;
  private _config!: ButtonToggleType;
  isChecked = false;

  constructor(private readonly channel: Channel) {}

  ngOnChanges() {
    this._config = ButtonToggleType.deserializeBinary(
      this.type.getValue() as unknown as Uint8Array,
    );
  }

  config(): ButtonToggleType {
    return this._config;
  }
}

My branch on my fork: feature/create-component-button_toggle

[richard-to]

Thanks. I'll take a look later.

[richard-to]

I took a look and haven't been able to figure out the reason why it's not able to import the MatButtonToggleModule. I'll keep looking when I get the chance.

[wwwillchen]

@CelaniDe I think it's because button toggle isn't listed in packages.bzl - you'll need to add it in two spots, similar to what @richard-to did in an earlier change for table (https://github.com/google/mesop/commit/b59f6b9abf6ce99c4aabd43597c160d759c8e134#diff-5ef0ea9ea291d74d4ad4ad321d0aea5488a66ea0560aff9eb210911b6809bbe2).

This is unfortunately due to the way we compile angular material components with Bazel and it's quite confusing.