Skip to content

Instantly share code, notes, and snippets.

@phosph

phosph/mat-select_with_tag-style.html

Last active September 22, 2022 21:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save phosph/597b9015d5d57752b098675c0f40119f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save phosph/597b9015d5d57752b098675c0f40119f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mat-select_with_tag-style.html
<ng-template>
<mat-form-field appearance="outline" class="full-width">
<mat-label>{{
'settings.$tabs.groups.group-settings.$tabs.general.add-role.$dialog.case-type-input-label'
| translate
}}</mat-label>
<mat-select multiple [formControl]="roles" class="role-section">
<mat-select-trigger>
<ng-container *ngFor="let role of values">
<span class="role-name">{{ role.name }}</span>
</ng-container>
</mat-select-trigger>
<mat-option *ngFor="let role of roles$ | async" [value]="role">
{{ role.name }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-template>
<style>
mat-select.role-section {
height: fit-content;
& ::ng-deep .mat-select-trigger {
height: fit-content;
}
mat-select-trigger {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 0.5rem;
flex-wrap: wrap;
& .role-name {
background-color: var(--bg-color-primary);
padding: 4px 8px;
border-radius: 5px;
color: #fff;
display: inline-block;
}
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment