Disable the button from outside

projects/components/src/lib/components/button/button.component.html

@@ -1,11 +1,11 @@
 @switch (type) {
   @case ('raised') {
-    <button mat-raised-button [disabled]="loading" [color]="color" (click)="click()">
+    <button mat-raised-button [disabled]="disabled || loading" [color]="color" (click)="click()">
       <ng-container *ngTemplateOutlet="content"></ng-container>
     </button>
   }
   @case ('stroked') {
-    <button mat-stroked-button [disabled]="loading" [color]="color" (click)="click()">
+    <button mat-stroked-button [disabled]="disabled || loading" [color]="color" (click)="click()">
       <ng-container *ngTemplateOutlet="content"></ng-container>
     </button>
   }

projects/components/src/lib/components/button/button.component.ts

@@ -17,6 +17,7 @@ export class ButtonComponent {
   @Input({ required: true }) type!: 'raised' | 'stroked';
   @Input({ required: true }) function!: () => Promise<void> | void;
 
+  @Input({ required: false }) disabled: boolean = false;
   @Input({ required: false }) color: 'primary' | 'accent' | 'warn' = 'primary';
 
   protected loading = false;

src/app/components/dialogs/dialogs.component.html

@@ -1,5 +1,5 @@
-<h2 class="tw-p-4 tw-m-0" translate>content.headline.dialogs</h2>
-<p class="tw-px-4" translate>content.text.dialogs</p>
+<h2 translate>content.headline.dialogs</h2>
+<p translate>content.text.dialogs</p>
 <h3 translate>dialog.simple_dialog.title</h3>
 <p translate>dialog.simple_dialog.content</p>
 <button mat-stroked-button type="button" (click)="openDialog()">Open dialog</button>

src/app/components/enum/enum.component.html

@@ -1,7 +1,7 @@
-<h2 class="tw-p-4" translate>content.headline.enum</h2>
-<p [innerHtml]="'content.text.enum' | translate" class="tw-px-4"></p>
-<h3 class="tw-p-4" translate>content.headline.enum_options</h3>
-<p class="tw-px-4" translate>content.text.enum_options</p>
+<h2 translate>content.headline.enum</h2>
+<p [innerHtml]="'content.text.enum' | translate"></p>
+<h3 translate>content.headline.enum_options</h3>
+<p translate>content.text.enum_options</p>
 <mat-form-field>
   <mat-label>Hero Type</mat-label>
   <mat-select>
@@ -12,8 +12,8 @@ <h3 class="tw-p-4" translate>content.headline.enum_options</h3>
     }
   </mat-select>
 </mat-form-field>
-<h3 class="tw-p-4" translate>content.headline.pipe</h3>
-<p class="tw-px-4" translate>content.text.pipe</p>
+<h3 translate>content.headline.pipe</h3>
+<p translate>content.text.pipe</p>
 Original value: {{ HeroType.Scientist }}
 <code class="tw-block">
   Original value: {{ '&#123;&#123; HeroType.Scientist &#125;&#125;' }}

src/app/components/loading/loading.component.html

@@ -1,3 +1,4 @@
+<p translate>content.text.loading_button</p>
 <bpa-button type="raised" color="accent" [function]="click">
   {{ text }}
 </bpa-button>
@@ -14,3 +15,7 @@
   {{ longText }}
 </bpa-button>
 <br><br>
+<bpa-button type="raised" color="primary" [disabled]="true" [function]="click">
+  {{ longText }}
+</bpa-button>
+<br><br>

src/app/components/loading/loading.component.ts

@@ -2,6 +2,7 @@ import { Component, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ButtonComponent } from '@bolzplatzarena/components/button';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-loading',
@@ -10,6 +11,7 @@ import { ButtonComponent } from '@bolzplatzarena/components/button';
     ButtonComponent,
     MatButtonModule,
     MatProgressSpinnerModule,
+    TranslateModule,
   ],
   templateUrl: './loading.component.html',
 })

src/app/components/table/table.component.html

@@ -1,6 +1,6 @@
-<h2 class="tw-p-4 tw-m-0" translate>content.headline.table</h2>
-<p class="tw-px-4" translate>content.text.table</p>
-<p class="tw-px-4" translate>content.text.column</p>
+<h2 translate>content.headline.table</h2>
+<p translate>content.text.table</p>
+<p translate>content.text.column</p>
 <ul>
   <li>Date</li>
   <li>Enumeration</li>
@@ -42,5 +42,5 @@ <h3 translate>content.headline.observables</h3>
     (editEvent)="view($event)"
     translateKey="hero.components.hero-list.">
 </bpa-table>
-<h3 class="tw-p-4" translate>content.headline.options</h3>
-<p class="tw-px-4 tw-w-32" translate>content.text.options</p>
+<h3 translate>content.headline.options</h3>
+<p translate>content.text.options</p>

src/app/i18n/de.json

@@ -9,7 +9,8 @@
       "enum": "Enums sind toll, Enums sind wichtig. Aber manchmal sind sie schwer zu nutzen, vor allem in Tempülates.<br>Hier findet ihr Tools die euch unterstützen.",
       "enum_options": "Dies ist eine Methode um aus einem Enum eine Datenquelle für ein Dropdown zu machen und dabei die Werte auch noch zu übersetzen.",
       "pipe": "Die Pipe gibt euch die Möglichkeit den Enum-Schlüssel in einer View zu nutzen. Dies ist vor allem dann wichtig, wenn das Enum nicht auf einem String basiert.",
-      "dialogs": "Diese Bibliothek gibt einige Möglichkeiten, einfach Dialoge zu erstellen und vorgefertigte Dialoge zu nutzen."
+      "dialogs": "Diese Bibliothek gibt einige Möglichkeiten, einfach Dialoge zu erstellen und vorgefertigte Dialoge zu nutzen.",
+      "loading_button": "Unterschiedliche Varianten für die Loading-Button."
     },
     "headline": {
       "first": "Bolzplatzarena Components",

src/app/i18n/en.json

@@ -9,7 +9,8 @@
       "enum": "Sometimes it is hard to handle enums, but it is important to use an enum instead of just using a number or a string.\n    <br>Here you can find some little helpers, which enable you to use enum for material select or in the tempalte as a\n    string very easily.",
       "enum_options": "Easy way to use a typescript enum as source of the material select.",
       "pipe": "The pipe provides an easy way to get the selected key of an enumeration in the template.",
-      "dialogs": "This library provides a way to use dialogs in your application."
+      "dialogs": "This library provides a way to use dialogs in your application.",
+      "loading_button": "Unterschiedliche Varianten für die Loading-Button."
     },
     "headline": {
       "first": "Bolzplatzarena Components",