I was wondering if it's possible to use as an active option not plain text but an actual angular component to display? Here's a custom badge I built which can be used for options but not an active one.
#Mat-Select custom styling for active option?
marsh lichen
latent stream
You can configure the way the "trigger" is rendered like so: https://material.angular.io/components/select/examples#select-custom-trigger
marsh lichen
So this is the active part?
<mat-select-trigger>
{{toppings.value?.[0] || ''}}
@if ((toppings.value?.length || 0) > 1) {
<span class="example-additional-selection">
(+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})
</span>
}
</mat-select-trigger>
Yeah that does work, thanks a lot! Requires a little bit of tuning but applying the current value with a formControl value should do it (below is just a provisional code):
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>ERP-System</mat-label>
<mat-select formControlName="erp_system">
<mat-select-trigger>
<app-erp-system [erpSystem]="erp.Weclapp" />
</mat-select-trigger>
<mat-option [value]="erp.Weclapp">
<app-erp-system [erpSystem]="erp.Weclapp" />
</mat-option>
<mat-option [value]="erp.Haufex360">
<app-erp-system [erpSystem]="erp.Haufex360" />
</mat-option>
</mat-select>
</mat-form-field>
Very weird, this is not it yet 😂
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>ERP-System</mat-label>
<mat-select formControlName="erp_system">
<mat-select-trigger>
<app-erp-system [erpSystem]="form.get('erp_system')?.value" />
</mat-select-trigger>
<mat-option [value]="erp.Weclapp">
<app-erp-system [erpSystem]="erp.Weclapp" />
</mat-option>
<mat-option [value]="erp.Haufex360">
<app-erp-system [erpSystem]="erp.Haufex360" />
</mat-option>
</mat-select>
</mat-form-field>
yeah it does work it was just an enum issue.
marsh lichen
@latent stream May you help me with this one please?
Somehow the formControl value is being filled properly, however the <mat-select-trigger> doesn't render it. Doesn't work either with just a normal <span> element..
<app-progress-bar [loading]="loading()" />
<div class="p-4">
<div class="mb-6 flex items-center justify-between">
<app-headline-two title="Mandanten wechseln" />
<app-dialog-close-button />
</div>
<form
class="flex flex-col gap-2"
(ngSubmit)="switchTenant()"
[formGroup]="form"
>
<span>{{ form.value.tenant.name }}</span>
<span>{{ form.value.tenant.erp_system }}</span>
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Auswahl Mandant</mat-label>
<mat-select formControlName="tenant">
<mat-select-trigger class="flex flex-col gap-1">
<span class="text-wrap">{{ form.value.tenant.name }}</span>
<app-erp-system [erp]="form.value.tenant.erp_system" />
</mat-select-trigger>
@for (tenant of tenants; track $index) {
<mat-option [value]="tenant">
<div class="flex flex-col gap-1 py-2">
<span class="text-wrap">{{ tenant.name }}</span>
<app-erp-system [erp]="tenant.erp_system" />
</div>
</mat-option>
} @empty {
<mat-option value disabled> Keine Mandanten gefunden </mat-option>
}
</mat-select>
</mat-form-field>
<button
class="self-end"
type="submit"
color="primary"
mat-raised-button
[disabled]="!form.valid"
>
Speichern
</button>
</form>
</div>
latent stream
Is this a standalone component?
marsh lichen
Yes it is, because standalone: true is default since angular v19 and I'm using v19.1.7 (latest)
Here's the entire component, the tenant formControl is being initially set:
@Component({
selector: 'app-switch-tenant-dialog',
imports: [
ReactiveFormsModule,
MatFormField,
MatButton,
MatSelect,
MatSelectTrigger,
MatOption,
MatLabel,
HeadlineTwoComponent,
DialogCloseButton,
ProgressBarComponent,
ErpSystemComponent,
],
template: `
<app-progress-bar [loading]="loading()" />
<div class="p-4">
<div class="mb-6 flex items-center justify-between">
<app-headline-two title="Mandanten wechseln" />
<app-dialog-close-button />
</div>
<form
class="flex flex-col gap-2"
(ngSubmit)="switchTenant()"
[formGroup]="form"
>
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Auswahl Mandant</mat-label>
<mat-select formControlName="tenant">
<mat-select-trigger class="flex flex-col gap-1">
<span class="text-wrap">{{ form.value.tenant.name }}</span>
<app-erp-system [erp]="form.value.tenant.erp_system" />
</mat-select-trigger>
@for (tenant of tenants; track $index) {
<mat-option [value]="tenant">
<div class="flex flex-col gap-1 py-2">
<span class="text-wrap">{{ tenant.name }}</span>
<app-erp-system [erp]="tenant.erp_system" />
</div>
</mat-option>
} @empty {
<mat-option value disabled> Keine Mandanten gefunden </mat-option>
}
</mat-select>
</mat-form-field>
<button
class="self-end"
type="submit"
color="primary"
mat-raised-button
[disabled]="!form.valid"
>
Speichern
</button>
</form>
</div>
`,
})
export class SwitchTenantDialogComponent {
loading = signal(false)
form: FormGroup
tenants: Tenant[]
constructor(
private dialogRef: MatDialogRef<SwitchTenantDialogComponent>,
@Inject(MAT_DIALOG_DATA) data: any,
private fb: FormBuilder,
private api: TenantApi,
private notificationService: NotificationService
) {
this.loadTenants()
this.form = this.fb.group({
tenant: [data.tenant, Validators.required],
})
}
switchTenant() {
if (!this.form.valid) return
this.loading.set(true)
this.api
.switchTenant(this.form.value.tenant.id)
.pipe(finalize(() => this.loading.set(false)))
.subscribe({
next: (response) => {
this.notificationService.showSuccess(response.message)
this.dialogRef.close(true)
},
error: (response: HttpErrorResponse) => {
this.notificationService.showError(response.error.message)
this.dialogRef.close(false)
},
})
}
private loadTenants() {
this.loading.set(true)
this.api
.userTenants()
.pipe(finalize(() => this.loading.set(false)))
.subscribe({
next: (response) => (this.tenants = response),
error: (response: HttpErrorResponse) => {
this.notificationService.showError(response.error.message)
},
})
}
}
Sorry, but I do not see the error
marsh lichen
<@328214370964340746> May you help me with this one please?
Somehow the formCont...
Same, even weirder is that the form value is being updated correctly, as shown in the screenshot with the two `<span>´ elements above the form field.
There's also a bug I've had since angular material v19 which cause [matBadgeHidden] not to work at all. Neither a normal boolish expression such as array.length > 0 nor a simple [matBadgeHidden]="true" does affect the visibility of the badge.
I will probably create a github issue on this one.
Yeah I can't reproduce it on stackblitz, this is pointless. 