how to compose a fieldset with 2 color themes?

Question

At the angle I have this code below

<fieldset id="fieldset" class="blue-light>
      <legend>Informaçoes X</legend>

      Texto texto texto

    </fieldset>

i have that Cod up for blue fieldset and that below for white standard fieldset

<fieldset id="fieldset" class="light>
      <legend>Informaçoes X</legend>

      Texto texto texto

    </fieldset>

I would like to compose so that I could use on the other pages, without the need to repeat scss, ie make a single scss and define two themes, white and blue, is it possible? can help me?

it is possible to insert the Legend inside it?

Answer 1

Just put the component template as follows:

<fieldset id="fieldset" [class]="tema">
      <legend>Informaçoes X</legend>

      Texto texto texto

    </fieldset>

The component’s Typescript file should receive a @input and would end up with something like:

@Input() tema;

And by calling the Component template you created, it would be something like:

<componente-tema [tema]="blue-light"></componente-tema>

I think this will suit you.

---

Project with example

Note: I made the choice to write the styles in the CSS file attached to the component (fieldset.component.css), but nothing prevents the style from being in another file, such as the general project style file (app.component.css) and be imported into the property styleUrls of the component to be used, in this case the fieldset.component.ts.
If the style is global, that is, several components will use, the correct thing would be to write them in the same general CSS file and import in whom you need.